jquery切换标签，带有额外的切换function

我有一些标签设置; 这是他们目前的工作：

1. 打开页面时隐藏内容
2. 在选项卡上单击显示内容（使用切换，以便用户可以显示/隐藏/显示/隐藏内容）
3. 激活选项卡在选择时更改颜色

问题：当用户单击其中一个选项卡并显示内容，然后单击其他选项卡时，两组内容都会显示（如累积切换）。

我想进行设置，以便在用户单击选项卡并显示内容，然后单击其他选项卡时，单击的第一个选项卡显示的内容将隐藏。

这是另一个处理类似问题的SO问题，但它不包括我所拥有的活动类代码 – 处理多个切换和有效的JS – http://jsfiddle.net/jHvjD/5/

JQUERY

$(document).ready(function(){ $('.tab_contents').hide(); $('.tab').click(function() { $(this.rel).toggle(); $('#tabs_container > .tabs > li.active') .removeClass('active'); $(this).parent().addClass('active'); $('#tabs_container > .tab_contents_container > div.tab_contents_active') .removeClass('tab_contents_active'); $(this.rel).addClass('tab_contents_active'); }); }); 

HTML

  
  
 
 Option 1 
 
Option 2
 
 
 
  
Option 1 stuff 
  
Option 2 stuff
  

Answer 1

 $('.tab_contents').hide(); $('.tab').click(function(){ var target = $(this.rel); $('.tab_contents').not(target).hide(); target.toggle(); $('#tabs_container > .tabs > li.active') .removeClass('active'); $(this).parent().addClass('active'); $('#tabs_container > .tab_contents_container > div.tab_contents_active') .removeClass('tab_contents_active'); $(this.rel).addClass('tab_contents_active'); }); 

小提琴： http ： //jsfiddle.net/GkGyt/2/

Answer 2

为什么这么复杂 – 首先尝试简单：

  $('.tab_contents_active') .removeClass('tab_contents_active'); 

代替

 $('#tabs_container > .tab_contents_container > div.tab_contents_active') .removeClass('tab_contents_active'); 

如果可行（它会），那么你可以优化。

我怀疑第一个代码没有优化，除非你的页面非常复杂，额外的选择只会让它变慢……但它真的取决于你的dom …首先尝试简单的“全部删除”解决方案。

Answer 3

你可以试试这个更简单。

 $(document).ready(function(){ $('.tab_contents').hide(); $('.tab').click(function() { var activeTabContent = $(this).attr('rel'); $('#tab_contents').not(activeTabContent).hide() .removeClass('tab_contents_active'); $(activeTabContent).toggle().addClass('tab_contents_active'); $(this).parent().addClass('active').siblings().removeClass('active'); }); }); 

Answer 4

do $('.tab_contents_active').toggle(); 在删除课程之前。 这样他们就会在新标签向下滑动之前向上滑动。