0

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

4

1 回答 1

1

Tabs小部件，不像你说的那样工作，我不寻找 "next" div，它寻找div与id你在 html 中放入标签href属性相同的 a a（或者如果它不是锚，a加载内容的页面）。

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

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

于 2013-09-13T14:35:52.040 回答