带有额外切换功能的 jquery 切换选项卡答案

【问题标题】：jquery toggle tabs with an extra toggle function带有额外切换功能的 jquery 切换选项卡
【发布时间】：2012-01-03 23:49:16
【问题描述】：

我已经设置了一些标签；这是他们目前所做的：

打开页面时隐藏内容
在标签点击时显示内容（使用切换开关，用户可以显示/隐藏/显示/隐藏内容）
选中时活动选项卡会改变颜色

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

我想设置它，如果用户单击一个选项卡并显示内容，然后单击另一个选项卡，则单击的第一个选项卡显示的内容将隐藏。

这是另一个处理类似问题的 SO 问题，但它不包括我拥有的活动类代码 - Dealing with multiple toggles 和有效的 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

     <div id="tabs_container">

      <!-- These are the tabs -->
      <ul class="tabs">
        <li>
          <a href="#" rel="#tab_1_contents" class="tab">Option 1</a>
        </li>
        <li><a href="#" rel="#tab_2_contents" class="tab">Option 2</a></li>
      </ul>

      <div class="clear"></div>

      <div class="tab_contents_container">

        <!-- Tab 1 Contents -->
        <div id="tab_1_contents" class="tab_contents tab_contents_active">Option 1 stuff        </div>

        <!-- Tab 2 Contents -->
        <div id="tab_2_contents" class="tab_contents">Option 2 stuff</div>
        </div>

【问题讨论】：

您是在尝试使用active 使元素可见还是实际切换显示？
使用jquery UI Tabs怎么样？
@JaredPar - 活动类突出显示正在使用的选项卡，单击时实际上会切换内容。
@JMax - 这不能解决问题；我已经在使用 jquery；我需要知道如何切换切换以应用于多个选择器
@JMax - 意思是我认为 UI 库没有给我任何更简单的解决方案

标签： jquery tabs

【解决方案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/

【讨论】：

好的，这可行，但是否可以继续切换项目？现在显示的内容会切换，但我不能再切换选项卡——这意味着如果选项 2 内容正在显示并且我单击选项 2 选项卡，则内容不会隐藏。
是的，你可以轻松做到这一点.. 也更新了答案和小提琴。看看吧。
谢谢。太棒了！我接受并赞成你的回答。

【解决方案2】：

为什么这么复杂——先尝试简单的：

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

而不是

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

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

我怀疑第一个代码没有优化，除非你的页面非常复杂，否则额外的选择器只会让它变慢......但这真的取决于你的 dom......试试简单的“remove em all " 先解决。

【讨论】：

【解决方案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');
  });
});

【讨论】：

【解决方案4】：

在删除类之前执行$('.tab_contents_active').toggle();。这样他们会在新标签向下滑动之前向上滑动。

【讨论】：