jquery - 选择时设置类激活

Question

我想class="active"在选择特定列表时设置一个属性。例如，当某个特定列表处于活动状态时，它应该被激活，而当其他列表被选中时，该列表应该被激活。我当前的 jQuery 代码在从列表中选择任何项目时将所有列表设置为活动状态。相反，我只希望该项目应该被选中。如何修改我的 jQuery 代码？

<ul class="nav nav-pills nav-stacked span5">
      <li class = "list"><a href="#" class="span3">abc</a></li>
      <li class = "list"><a href="#" class="span3">def</a></li>
      <li class = "list"><a href="#" class="span3">ghi</a></li>
      <li class = "list"><a href="#" class="span3">jkl</a></li>
</ul>

jQuery

$(document).ready(function () {
    $(".span3").click(function () {
    $('.list').attr("class","active");           // sets all the list item active. Instead I want only that particular element to be active.

    });

});

Answer 1

$(this).parent()用来只获取被点击的，它比.list更容易使用。addClassattr

$(document).ready(function () {
    $(".span3").click(function () {
        $(this).parent().addClass("active");
    });
});

如果您不希望所有其他列表也处于活动状态：

$(document).ready(function () {
    $(".span3").click(function () {
        $('.list').removeClass("active");
        $(this).parent().addClass("active");
    });
});

Answer 2

您可以使用这个添加类：

$(document).ready(function () {

    $(".span3").click(function () {
        $(this).parent().addClass("active");    
    });    
});

对于这样的删除类：

$(document).ready(function () {

    $(".span3").click(function () {
        $('.list').removeClass("active");    
    });    
});

请参阅 jQuery API 文档addClass()和removeClass()

更新：

是的，我忘记了父母（）

Answer 3

Jquery 提供了更多的功能。没有人使用。

jQuery代码：

$(document).ready(function () {
    $(".nav>li").click(function () {
        $(this).siblings('.active').toggleClass("active");
        $(this).toggleClass("active");
    });
});

链接：http: //jsfiddle.net/techsin/hJYfu/3/ 新

注意html结构。

Answer 4

使用 addClass 方法而不是 attr

$(document).ready(function () {
  $(".span3").click(function () {
  $('.list').removeClass('active');
  $(this).parent().addClass("active");

  });

});