how to add a css class to a list when the particular li is clicked using jquery?


Tags: jquery,html,css

Problem :

I have tried to addClass when one among the li is clicked.But i am unable to toggle the class.I mean if another li is clicked ,the css which we before added to befor li is not getting disappered..

$(document).ready(function() {
  $('#nav-masthead li a').on('click', function() {
    $('#nav-masthead li a').removeClass("col");
    $(this).addClass("col");
  });
});
.col {
  color: black;
  background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style="padding-top: 38px;padding-left:113px">
  <li class="nav nav-tabs">
    <a href="#/Home"><span class="glyphicon glyphicon-home ">Home</span></a>
  </li>
  <li>
    <a href="#/Add"><span class=" glyphicon glyphicon-plus-sign ">Add Form</span></a>
  </li>
  <li>
    <a href="#/View">View Form</a>
  </li>
</ul>



Solution :

You have a couple of bits incorrect in both your HTML and your JS.

Your HTML does not have the id #nav-masthead which is what the JS function is looking for so I've now added that in to the ul.

You are also not preventing the default functionality of an a click which will do a redirect. I have disabled this as obviously the change in class will not impact the view for the user as they are being redirected.

I've also made the change of colors a bit more obvious to show how it all works but you can amend the CSS to your liking.

$(document).ready(function() {
  $('#nav-masthead li a').click(function(e) {
    e.preventDefault();
    $('#nav-masthead li a').removeClass("col");
    $(this).addClass("col");
  });
});
#nav-masthead li a {
  background: black;
  color: white;
}
#nav-masthead li a.col {
  color: black;
  background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-masthead" style="padding-top: 38px;padding-left:113px">
  <li class="nav nav-tabs">
    <a href="#/Home"><span class="glyphicon glyphicon-home ">Home</span></a>
  </li>
  <li>
    <a href="#/Add"><span class=" glyphicon glyphicon-plus-sign ">Add Form</span></a>
  </li>
  <li>
    <a href="#/View">View Form</a>
  </li>
</ul>


    CSS Howto..

    How to add padding to the left and right side of grid in Bootstrap WITHOUT padding between grid boxes using col-sm-3

    How can I make the contents of a table cell overflow vertically without also expanding the table cells height?

    How to animate an “:after” using CSS or jQuery

    How to create custom shapes with pseudo classes in CSS3

    How to build some basic tiles with Title and Description?

    How to adjust items in an ordered list without affecting sub-lists?

    css ul and li - multiple spans in each li and how to line up the spans vertically

    PHP imagecopyresampled + how to get the best results

    How to set width of all elements in a table column with CSS

    How to target and style specific elements using CSS

    How is this put in the center using CSS?

    How to make a block element adjust to the size of what is inside it?

    How do I animate my CSS progress bar?

    How do I align div vertically like in picture

    How do I make elements flow horizontally instead of vertically?

    Centering Special Javascript Popup, How?

    How to draw a gradient colored trapezoid with css3?

    How do I move all the li elements with specific css style to another ul?

    How to Drop 2 nested shadows On 2 Divisions in CSS? [closed]

    How to have render big chunk of html inside a javascript forloop

    How can i position a background image to the top left and bottom right of a html element?

    How to include SASS into CSS

    How to use global variables in CSS-Modules?

    How do I light up an entire single row by hovering on a span in one of the columns?

    How To Make CSS Animations Ease Back To Position When No Longer Hovering?

    How to apply an opacity without affecting a child element with html/css?

    how to show product info after image in bigger zoom levels

    How to update the attribute while overriding a style defined in css?

    How to make an arrow pointing down after a section in HTML/CSS

    How can browsers resolve icon libraries that aren't specifically referenced in the frontend code?