jquery - 使用 jquery 动态更改 css 类

Question

我想<li>动态更改css类。我正在使用 asp.net 母版页。在下面的示例中，如果我单击AboutUs.aspx页面加载上的链接，我想更改<li class="single">为<li class="active single">.

怎么做？

 <div class="nav-collapse">
     <ul class="nav nav-pills">
           <li class="active single"><a href="Default.aspx">HOME
                 <i>company home</i>
                  </a>
            </li>
            <li class="single"><a href="AboutUs.aspx">About Us
                 <i>want to say</i>
                  </a>
            </li>

Answer 1

像这样：

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

这是一个 jsFiddle 示例 - http://jsfiddle.net/HNKeA/1/。

Answer 2

$('.nav-collapse > ul > li > a').click( function(){
   $('li').removeClass('.active');
   $(this).parent().addClass('.active');
});

Answer 3

正如@scrappedcola 所说，您不必在Javascript 中执行此操作，因为这完全可以从服务器端代码中实现。但如果你坚持，这里是步骤：

1 你必须告诉 Javascript 你想要突出显示菜单中的哪个项目。为每个菜单项创建唯一标识符，并告诉服务器端代码进行设置。例如：

<li class="single home">
    <a href="Default.aspx">HOME<i>company home</i></a>
</li>
<li class="single aboutus">
    <a href="AboutUs.aspx">About Us<i>want to say</i></a>
</li>
<script>
    var activeLink = 'aboutus';
</script>

2 创建并调用 Javascript/jQuery 函数来更改 CSS 类：

$("." + activeLink).addClass("active");

Answer 4

$('.nav-pills a').click(function(){
    $('.nav-pills li').removeClass('active');
    $(this).parent().addClass('active')
})

Answer 5

 $('li.single').click(function(){
      $(this).addClass('active');

  });

或者

 $('li.single').click(function(){
         $(this).attr('class', 'active single');
      });

Answer 6

$("ul li:first").attr('class', 'newClass');

只需相应地更改选择器。这应该改变嵌套在 ul 中的每个 li