jQuery切换选项卡，带有额外的切换功能 [英] jquery toggle tabs with an extra toggle function

问题描述

我已经设置了一些标签；这是他们目前的工作:

I've got some tabs setup; here's what they currently do:

1. 打开页面时隐藏内容
2. 在选项卡单击时显示内容(使用切换按钮，以便用户可以显示/隐藏/显示/隐藏内容)
3. 活动标签在被选中时会更改颜色

问题:当用户单击一个选项卡并显示内容，然后单击另一个选项卡时，两组内容都会显示(就像累积切换一样).

The issue: when the user clicks on one of the tabs and shows the content, and then clicks on the other tab, both sets of content show (like a cumulative toggle).

我想要对其进行设置，以便如果用户单击一个选项卡并显示其内容，然后单击另一个选项卡，则将隐藏所单击的第一个选项卡的显示内容.

I want to set it up so that if the user clicks a tab and shows the content, and then clicks the other tab, the content showing for the first tab clicked will hide.

这是另一个类似问题的SO问题，但其中不包含我拥有的活动类代码- http://jsfiddle.net/jHvjD /5/

Here's another SO question that deals with something similar, but it doesn't include the active class code I have - Dealing with multiple toggles and the JS that works - 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>

推荐答案

$('.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/

这篇关于jQuery切换选项卡，带有额外的切换功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！