生成的 Jquery Tabs UI / div id

Question

我目前对 jquery Tabs UI 为选项卡生成 div 的方式遇到问题。

通常，用户首先会调用 $("tabs").tab() 来初始化选项卡。

 <div id="tabs">
    <ul>
      <li>
        <a href="controls/form_unassigned.html" id="channel1_link">CH1 N/A</a>
      </li>

      <li>
        <a href="controls/form_srw.html" id="channel2_link">CH2 N/A</a>
      </li>

     </ul>
  </div>

这将创建

<div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
</div>

<div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
</div>

这就是 div id 为“ui-”++ 的预期结果。

但是，如果您调用 $("tabs").tab() 再次初始化而不刷新浏览器，则递增的 id 不会从 0 开始，而是从 2 开始。因此选项卡将设置为：

<div id="ui-tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
</div>

<div id="ui-tabs-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
</div>

但是，我想要的效果是每次调用initialize时id都从0开始。 因此，我想要 1/2，而不是 div id 的 3/4。 我尝试在每个初始化的开头调用 .tabs('destroy') 希望这会重置自动生成的 id，但这也不起作用。 我在 jquery 选项卡 UI 上找不到任何内容来解决此问题，或者也许我只是没有看到它。

我希望 id 从 0 开始的原因是因为我使用这个特定的 div 来动态填充内容。

任何建议表示赞赏，谢谢！ D

Answer 1

不修改 jQuery UI 源代码是不可能的。

tabId

仅从包装选项卡模块的匿名函数内部可见，并且它不会“导出”任何函数来更改它。

如果您可以接受非常肮脏的黑客攻击，请在函数中添加以下内容：

window.resetTabID = function() {
    tabId = 0;
}

这将允许您调用全局函数

resetTabID()

来重置选项卡ID。但是，你最好不要使用这样的 hack。

Answer 2

Per this post - 使用标题属性。

<div id="example">
     <ul>
         <li><a href="ahah_1.html"><span>Content 1</span></a></li>
         <li><a href="ahah_2.html"><span>Content 2</span></a></li>
         <li><a href="ahah_3.html"><span>Content 3</span></a></li>
     </ul>
</div>
Obviously this degrades gracefully - the links, e.g. the content, will still be accessible with JavaScript disabled.

Note that if you wish to reuse an existing container, you could do so by matching a title attribute and the container's id:

<li><a href="hello/world.html" title="Todo Overview"> ... </a></li>
and a container like:

<div id="Todo_Overview"> ... </div>

效果很好！

Answer 3

您可以使用

aria-controls

设置选项卡 id

 <div id="tabs">
    <ul>
      <li aria-controls="tab-mycustomid">
        <a href="controls/form_unassigned.html" id="channel1_link">CH1 N/A</a>
      </li>
      ....

我发现在页面加载时更改到正确的选项卡时很有用