CSS: How to change css class of li in a navigation


Tags: jquery,html,css

Problem :

i need to create a navigation menu.when i select one of it i need to change css class in to active for corresponding li.for this i have used thes code as shown

  <ul class="smallmenuContainer">
    <li><a class="active" href="index.html#red">Home</a></li>
    <li><a href="index.html#green">About us</a></li>
    <li><a href="index.html#blue">Works</a></li>
    <li><a href="index.html#yellow">Contact us</a></li>
  </ul>

   <div class="introContainer">
    <a name="red">red</a>
</div>
<div class="aboutContainer">
    <a name="green">green</a>
</div>
<div class="galleryContainer">
    <a name="blue">blue</a>
</div>
<div class="contactContainer">
</div>
<a name="yellow">yellow</a>

could you please help me to change the corresponding css class...



Solution :

use

$(function(){
    $('.smallmenuContainer a').click(function(){
         $('.smallmenuContainer a').removeClass('active');
         $(this).addClass('active');
   });
});

it will remove active class from all other a tags and add class to current a


    CSS Howto..

    tooltip box not showing using css

    How to make CSS color transition time correctly with transform perspective?

    Polymer 1.x: How to imperatively (using JS) obtain the value of a custom CSS property?

    How to add local css file to a page in WebView?

    How to add far-future expires headers to minified cssfiles/scripts?

    How to override w3.css for table border

    How to Flip Div's in Randomly

    How to add html classes to a Django template 'for-loop' dynamically?

    How would I get my horizontal navigation bar to span the full width?

    How to apply effects to a unicode character in CSS? [closed]

    How to hide :before in overflow:hidden element

    How to add class based on which css class name is come in jquery

    how to add string to the class javascript(jquery)

    How can I compress / gzip my mimified .js and .css files before publishing to AWS S3?

    How to design aggregations filter in css for week, month?

    How to add more items to the list without going to the next row? [closed]

    How to get html data-attribute value in css regular expressions

    How to make my popup not transparent and sideways draggable?

    How to Replace image in CSS background using jQuery?

    How can I animate this?

    How do you make a nav bar “sticky”?

    How to use dp to calculate shadows - web development HTML CSS

    How to create css based breadcrumb which supports IE8 [closed]

    How to alter css style from parent page inside an iframe using jquery

    How to give shadow to a border

    How to make multiple gradient work with CSS

    How to make a DIV section clickable?

    how to apply transform rotate all browse in inline css using jquery

    How to remove spacing around in CSS? [duplicate]

    How to display print preview as same as the webpage using css?