使用 jquery 动态更改 css 类答案

【问题标题】：change css class dynamically using jquery使用 jquery 动态更改 css 类
【发布时间】：2013-04-02 22:52:34
【问题描述】：

我想动态更改<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>

【问题讨论】：

$(this).addClass('active'); ???
为什么不让 ASP 将该活动类添加到 URL 中？
这可能会有所帮助：stackoverflow.com/questions/5735171/…
当您加载页面时，链接会与类一起呈现。您知道哪个页面正在通过 Request 对象呈现内容，因此只需呈现链接以将页面与 href 匹配并更改颜色即可。到目前为止，您尝试过什么？

标签： jquery asp.net css

【解决方案1】：

正如@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");

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

像这样：

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

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

【讨论】：

它正在经历页面加载，所以这将一直工作到页面重新加载

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

  });

或

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

【讨论】：

【解决方案6】：

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

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

【讨论】：