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

时间:2012-01-03 15:09:59

标签: jquery tabs

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

  1. 在打开页面时隐藏内容
  2. 在标签点击上显示内容(使用切换,以便用户可以显示/隐藏/显示/隐藏内容)
  3. 活动标签在选中时会更改颜色
  4. 问题:当用户点击其中一个标签并显示内容,然后点击其他标签时,两组内容都会显示(如累计切换)。

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

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

4 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:0)

为什么如此复杂 - 首先尝试简单:

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

而不是

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

如果可行(它会),那么你可以进行优化。

我怀疑第一个代码没有优化,除非你的页面非常复杂,额外的选择会让它变慢......但它真的取决于你的dom ...试试简单的&#34;删除所有&#34;解决方案首先。

答案 2 :(得分:0)

你可以试试这个更简单。

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

答案 3 :(得分:0)

在删除课程之前

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