以编程方式更改选定的 jQuery UI 选项卡？

Question

所以我有一个页面，我只使用标签的风格化部分。单击一个选项卡将带您进入该选项卡处于活动状态的新页面，因此几乎可以模仿他们应该做什么，但一个页面中没有 4 个大页面。对于每一页，我将活动标签更改为

$( ".tabs" ).tabs({ active:2 });

等等。这工作正常。现在是对话框。我在此页面上有一个对话框，它也启动选项卡。由于许多 div 中嵌套了信息，因此“选项卡”的默认功能将不起作用。据我了解，当您单击一个选项卡时，它会查找下一个 div。 3 个标签 = 只有 3 个 div。所以在这种情况下，我只是再次使用选项卡进行样式化，并显示/隐藏每个不同选项卡（总共 3 个选项卡）所需的信息并取消绑定点击。

$('.tabsDialog > ul > li > a').unbind('click');

所以，自然我的想法是使用单击功能隐藏以前的 div 并显示新的 div 将激活这个新标签。所以像这样的

         $('a.globalSet').on('click',function(){
              $('div.timeSet').hide();
              $('div.globalSet').fadeIn();
              $('div.comManager').hide();
              $( "li.timeSet" ).tabs({ active:1 });
          });

这并没有激活我的新标签。我试过 addClass .ui-tabs-active 仍然没有运气。有任何想法吗？提前致谢。 jsfiddle：http://jsfiddle.net/tRKSv/2/

Answer 1

Tabs 小部件，不能完全按照你说的那样工作，我不寻找“下一个”div，它寻找具有相同 id 的 div，你输入了 href html 中 a 标记的属性（或者如果它不是锚点，则为从中加载内容的页面）。

所以，要使您的代码正常工作，只需在您的 a 标记中添加正确的 href 属性即可。这只是对话框的一个示例，但您应该为两个选项卡镜像此代码：

<div id="dialog" title="Basic dialog">
   <div id="dialogTabs">
     <ul>
       <li><a href="#info1">dialog info 1</a></li><!-- 'a' tags with proper href -->
       <li><a href="#info2">dialog info 2</a></li>
       <li><a href="#comManager">dialog info 3</a></li>
       <li><a href="someOtherPage.html">dialog info 3</a></li><!-- ajax loaded content -->
     </ul>
     <div id='info1' class='info1'> <!-- div with corresponding 'id' attribute -->
        <!- More content here ->
     </div>
     <div id='info2' class='info1'>
        <!- More content here ->
     </div>  
     <div id='comManager' class='comManager'>
        <!- More content here ->
     </div>
   </div>
</div>

这是一个小提琴：http://jsfiddle.net/rf90210/tRKSv/3/