Question

我有标签菜单，可以在再次点击时关闭当前标签。

单击菜单时，文本颜色变为红色（活动），但问题是再次单击时，它不会变为蓝色（默认）。

如何更改代码？

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



a { color:blue}
.tab_contents { border:1px solid #000; }
.active a { color:red;}

Answer 1

$('.tab_contents').hide();
var count = 0; 
$('.tab').click(function() {
    count++; //increment count everytime it is clicked
    var target = $(this.rel);  
     $('.tab_contents').not(target).hide();
     target.slideToggle(100);
    $('#tabs_container > .tabs > li.active')
    .removeClass('active');
    if((count % 2) != 0) { 
         $(this).parent().addClass('active');
     } else { 
         $(this).parent().removeClass('active');
     } 
 $('#tabs_container > .tab_contents_container > div.tab_contents_active')
  .removeClass('tab_contents_active');
 $(this.rel).addClass('tab_contents_active');
});

简单计算，跟踪计数

Answer 2

您是否尝试过toggleClass()，我在下面有一个示例来解决您的问题。

$('li.tab').click(function(){
    $(this).toggleClass('active');
});

ul li.tab a {
    color: blue;
}

ul li.active a {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
    <li class="tab">
        <a href="#">Button 1</a>
    </li>
    <li class="tab">
        <a href="#">Button 2</a>
    </li>
</ul>

jquery，再次点击时关闭标签菜单

2 个答案: