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

Programmatically change selected jQuery UI tabs?

本文关键字：jQuery UI 选项 编程 方式更      更新时间：2023-09-26

所以我有一个页面，我只是使用选项卡的风格化部分。单击一个选项卡将带您进入一个处于活动状态的新页面，因此几乎模拟了他们应该做什么，但一个页面中没有 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/

Tabs小部件，并不完全按照您所说的工作，我不寻找"下一个"div，它寻找与您在 html 中放入a标签的属性href id相同的div（或者如果它不是锚点，则为加载内容的页面）。

因此，要使您的代码正常工作，只需在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/

相关文章：