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

使用jquery动态更改css类

6 个答案: