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，并且使用addClass代替attr更容易。

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

  });

});

选择时将类设置为活动

4 个答案: