Question

我正在制作一个打开/隐藏单页内div的菜单。

我想要做的是在当前点击的菜单项上应用一个类（.active），只要打开与它连接的div。关闭div或选择其他菜单项后，类将消失/应用于其他菜单项。

我尝试使用$(".your_selector li").addClass("active");，但它没有做任何事情，只是将所有菜单项标记为活动状态，正如您所期望的那样。

你会如何解决这个问题？这是小提琴http://jsfiddle.net/4DGUV/3/

提前致谢

Answer 1

$('document').ready(function () {
  $('button').click(function () {      //<----click the buttons
      $('button').removeClass('active'); //<-----remove the class from the button
      $(this).addClass('active'); //<---add the class to currently clicked button
      var $div = $('#' + $(this).data('href'));
      $('.demo').not($div).hide();
      $div.slideToggle();
   });
});

或更好的方式：http://jsfiddle.net/4DGUV/8/

$('document').ready(function () {
  $('.menu li').click(function () {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
    var $div = $('#' + $(this).data('href'));
    $('.demo').not($div).hide();
    $div.slideToggle();
  });
});

然后你的html应该是这样的：

<div class="menu">
  <ul>
    <li> <a href='#' id="show2" data-href="vission1">news</a>

    </li>
    <li> <a href='#' id="show3" data-href="mteam">team</a>

    </li>
    <li> <a href='#' id="show1" data-href="mission1">download</a>

    </li>
  </ul>
</div>

Answer 2

您需要在li的点击事件中添加它。

示例

$(".your_selector li").click(function(){ $(this).addClass('active'); });

因为您尝试的所有li标记都是addClass所以您需要告诉jquery addClass到被点击的特定li。

Answer 3

使用以下内容：

$(".your_selector li").click(function(){
    $(this).removeClass().addClass('active');
});

在<button>上添加.active类，显示相应的<div> </div> </button>

3 个答案: