I'm trying to use jQuery UI 1.7.2 to add tabs on the fly. First, I create the div that holds the content that belongs in the tab, and then I call $('#tabs').tabs("add",...). jQuery UI correctly adds a new li in the tabs list. However, instead of creating a class attribute on my tab div, it creates a whole new tab div with some bogus id, and creates the class on that.
Here's the mark-up it generates:
<div id="tabs" class="ui-tabs ui-widget ui-widget-content">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default"><a href="#ui-tabs-41"><span>Tab 1</span></a></li>
<li class="ui-state-default"><a href="#ui-tabs-36"><span>Tab 2</span><开发者_运维知识库;/a></li>
<li class="ui-state-default"><a href="#ui-tabs-27"><span>Tab 3</span></a></li>
</ul>
<div id="MyTab1"><img src="/1.jpg"/></div>
<div id="ui-tabs-41" class="ui-tabs-panel ui-widget-content ui-tabs-hide"/>
<div id="ui-tabs-36" class="ui-tabs-panel ui-widget-content ui-tabs-hide"/>
<div id="ui-tabs-27" class="ui-tabs-panel ui-widget-content"/>
<div id="MyTab2"><img src="/2.jpg"/></div>
<div id="MyTab3"><img src="/3.jpg"/></div>
The divs like MyTab1, etc. are the ones I want to be turned into tabs. The divs like ui-tabs-41 are the ones that jQuery UI decides to generate on its own... and I don't know why.
Apparently, you have to first call $('#tabs').tabs("add", "#MyTab1", ...), and only then insert your content into #MyTab1. jQuery UI cannot take your existing #MyTab1 container and turn it into a tab. This is not obvious from the jQuery UI docs.
hmm, not entirely sure, but a I had the same problem, until i read in the documentation which said that, if you add a title tag to the li>a like
<div id=tabs>
<ul>
<li><a href="#Tab1" title="Tab1">Tab 1 Head</a></li>
</ul>
<div id=Tab1>tab 1 content</div>
</div>
it DOES use the predefined div and does not add any other ones (i.e just $("#tabs").tabs() )works fine without any "add" etc (worked for me anyway). Dunno, maybe it helps someone
精彩评论