2

I am totally new on jquery. When i click to "Invoice" i need to remove the "active and color" class from li and a tag of "Home" . Also the "active and color" classes should be added to the "Invoice" of li and a tag. And so goes for the "Logout"

This is my html code.

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

Sorry for my English. Thanks

Improve this question
4
  • 1
    jquery documentation covers these things. Please take a look at the doc. api.jquery.com Commented Aug 4, 2016 at 10:01
  • 1
    These are very basic stuffs. Search for jQuery addClass, removeClass, toggleClass Commented Aug 4, 2016 at 10:03
  • Yeah i did the research and i could not do it, it would be very helpful if u could provide me the answer . ThankU Commented Aug 4, 2016 at 10:03
  • 1
    There are SOOOO MANY questions covering this and several, several articles all over the web. I I find it hard to believe that you "did your reseach" Commented Aug 4, 2016 at 10:09

3 Answers 3

Reset to default
2 

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

This code works as your expecting 

$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

Happy Coding....

Improve this answer

Comments

0

Try like this..

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

Added class name for all li as same and do the following

$("#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");
    });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.