Question

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

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

问题：当用户点击其中一个标签并显示内容，然后点击其他标签时，两组内容都会显示（如累计切换）。

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

这是另一个涉及类似问题的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>

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 ...试试简单的＆＃34;删除所有＆＃34;解决方案首先。

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

在删除课程之前

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

jquery切换标签，带有额外的切换功能

4 个答案: