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

我已经设置了一些选项卡；以下是他们目前的工作：

打开页面时隐藏内容

在选项卡单击时显示内容（使用切换，以便用户可以显示/隐藏/显示/隐藏内容）

选择“活动”选项卡时会更改颜色

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

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

这里还有一个与之类似的问题，但它不包括我拥有的活动类代码-和工作的JS-

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>

选项1材料
选项2材料

为什么要这么复杂？先试试简单的方法：

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

而不是

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

如果这是有效的（它会），那么你可以优化

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

为什么这么复杂？首先尝试简单的解决方案：

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

而不是

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

如果这是有效的（它会），那么你可以优化

---

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

您可以尝试更简单的方法

$(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');
  });
});

---

你可以试试更简单的方法

$(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');
  });
});

执行

$（'.tab_contents_active'）.toggle（）删除类之前。
这样，它们将在新选项卡向下滑动之前向上滑动。
do
$（'.tab\u contents\u active'）.toggle（）删除类之前。
$('.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');
 });

这样，它们将在新选项卡向下滑动之前向上滑动

$('.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');
 });

小提琴：

fiddle:
您是想使用
活动的
使元素可见还是实际切换显示？使用@JaredPar怎么样？活动类突出显示正在使用的选项卡，单击时实际切换内容。@JMax-这并不能解决问题；我已经在使用jquery了；我需要知道如何将切换切换应用于多个selectors@JMax-这意味着我认为UI库没有给我提供任何更简单的解决方案-您试图使用
活动
使元素可见或实际切换显示？如何使用？@JaredPar-活动类突出显示正在使用的选项卡，单击时，实际上切换内容。@JMax-这并不能解决问题；我已经在使用jquery了；我需要知道如何将切换切换应用于多个selectors@JMax-这意味着我不认为UI库为我提供了任何更简单的解决方案。好的，这是可行的，但是否有可能继续能够切换项目？现在显示的内容会切换，但我无法再切换选项卡--这意味着，如果显示选项2的内容，我单击选项2选项卡，内容将不会隐藏。是的，你可以很容易地做到。。更新了答案，也做了修改。看看，谢谢。这太完美了！我接受了你的答案并投了赞成票。好吧，这是可行的，但是否有可能继续能够切换项目呢？现在显示的内容会切换，但我无法再切换选项卡--这意味着，如果显示选项2的内容，我单击选项2选项卡，内容将不会隐藏。是的，你可以很容易地做到。。更新了答案，也做了修改。看看，谢谢。这太完美了！我接受了你的答案并投了赞成票。