Question

我在jquery上全新。当我点击＆＃34; Invoice＆＃34;我需要删除＆＃34;活动和颜色＆＃34;来自li的课程和＆＃34; Home＆＃34; 。还有＆＃34;活跃和颜色＆＃34;课程应该添加到＆＃34; Invoice＆＃34;李和标签。对于＆＃34; Logout＆＃34;

也是如此

这是我的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>

抱歉我的英文。感谢

Answer 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>

Answer 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

快乐编码......

Answer 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");
    });

删除类并添加类jquery

3 个答案: