Jquery Tabs UI / div id that is generated

I'm currently having issues with the way jquery Tabs UI generate the divs for the tabs.

Normally, the user first would call $("tabs").tab() to initialize the tabs.

 <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>

This will create

<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>

Which is what is expected where it the div id is "ui-" + + .

However if you call $("tabs").tab() to initialize again without refreshing the browser the incremented id doesn't start from 0 by starts from 2. So the tabs will be set to:

<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>

However, the desire effect I want is for the id to start at 0 every time the initialize is called. So instead of 3/4 for the div id, i want 1/2. I tried calling .tabs('destroy') in the beginning of each initialize hoping to that would reset the auto generated id, but that doesn't work either. I can't find anything on the jquery tabs UI to resolve this issue or maybe i'm just not seeing it.

The reason I want the id to start at 0, is because I use this specific div to populate the content dynamically.

Any advice appreciated, Thanks! D

It is not possible without modifying the jQuery UI sourcecode.

tabId is only visible from inside the anonymous function wrapping the tabs module and it doesn't "export" any functions to change it.

If a very dirty hack is acceptable for you, add the following inside the function:

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

This would allow you to call the global function resetTabID() to reset the tab id. However, you better don't use hacks like that.

Per this post - use the title attribute.

<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>

Works great!