删除类并添加类jquery [重复]答案

【问题标题】：removing class and adding class jquery [duplicate]删除类并添加类jquery [重复]
【发布时间】：2016-08-04 09:58:41
【问题描述】：

我对 jquery 完全陌生。当我点击“Invoice”时，我需要从 li 中删除“active and color”类和“Home”标签。此外，应将“活动和颜色”类添加到 li 的“发票”和标签中。 “注销”也是如此

这是我的 html 代码。

<ul class="nav navbar-nav navbar-right" id="navbarprop">
    <li id="home" class="active">
        <a class="color" href="#"><i class="glyphicon glyphicon-home"></i>&nbsp Home</a>
    </li>
    <li id="invoice">
       <a href="Invoice.aspx"><i class="glyphicon glyphicon-list-alt"></i>&nbsp Invoice</a>
    </li>
    <li id="logOut">
        <a href="#"><i class="glyphicon glyphicon-log-out"></i>&nbsp Log Out </a>
    </li>
</ul>

对不起我的英语。谢谢

【问题讨论】：

jquery 文档涵盖了这些内容。请看一下文档。 api.jquery.com
这些是非常基本的东西。搜索 jQuery addClass、removeClass、toggleClass
是的，我做了研究，但我做不到，如果你能给我答案，那将非常有帮助。谢谢你
有很多关于这个问题的问题以及网络上的几篇文章。我很难相信你“做了你的研究”

标签： jquery html

【解决方案1】：

var nav = $('#navbarprop');

// Add a click listener to the nav that fires when an anchor within it is clicked.
nav.on('click', 'a', function(event) {
  event.preventDefault();
  // Remove the classes from the current active elements
  nav.find('li.active').removeClass('active');
  nav.find('a.color').removeClass('color');
  // Add the class to current, clicked element(s)
  $(this).addClass('color');
  $(this).parent().addClass('active');
});

li.active {
  font-weight: bold;
}
a.color {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav navbar-right" id="navbarprop">
  <li id="home" class="active">
    <a class="color" href="#"><i class="glyphicon glyphicon-home"></i>&nbsp Home</a>
  </li>
  <li id="invoice">
    <a href="Invoice.aspx"><i class="glyphicon glyphicon-list-alt"></i>&nbsp Invoice</a>
  </li>
  <li id="logOut">
    <a href="#"><i class="glyphicon glyphicon-log-out"></i>&nbsp Log Out </a>
  </li>
</ul>

【讨论】：

【解决方案2】：

此代码按您的预期工作

$function() { // on document ready function starts
 $('ul li a').click(function(event) { // click event function starts
    event.preventDefault(); // Prevent default action
    $('li').removeClass('active'); // remove class all li classes which contains active
    $(this).parent().addClass('active'); // add class current clicked like class active
 }); // click event function ends
}); // Dom ready function ends

快乐编码....

【讨论】：

【解决方案3】：

像这样试试..

<ul class="nav navbar-nav navbar-right" id="navbarprop">
    <li id="home" class="active className">
        <a class="color" href="#"><i class="glyphicon glyphicon-home"></i>&nbsp Home</a>
    </li>
    <li id="invoice" class="className">
        <a href="Invoice.aspx"><i class="glyphicon glyphicon-list-alt"></i>&nbsp Invoice</a>
    </li>
    <li id="logOut" class="className">
        <a href="#"><i class="glyphicon glyphicon-log-out"></i>&nbsp Log Out </a>
    </li>
</ul>

为所有 li 添加相同的类名并执行以下操作

$("#navbarprop").on('click', 'a', function(event) {
      //to romove class active & color
        $(".className").removeClass("active");
        $(".className a").removeClass("color");
      //to add class for current angular tag click
        $(this).parent().addClass("active");
        $(this).addClass("color");
    });

【讨论】：