jquery - 在 a 上添加 .active 类显示相应的

Question

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

我要做的是在当前单击的菜单项上应用一个类（.active），只要打开连接到它的 div 即可。一旦 div 关闭，或者选择了其他菜单项，类就会消失/应用于其他菜单项。

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

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

提前致谢

Answer 1

更改为此脚本：http: //jsfiddle.net/4DGUV/7/

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

因为您要尝试的是addClass所有 li 标签，所以您需要告诉 jqueryaddClass到特定li的点击。

Answer 3

使用以下内容：

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