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

    how to make a drop down menu fixed from the top with css?

    How do I uncollapse a margin?

    How to only select a displayed element using CSS

    How are CSS elements combined

    How to zoom in / out depending on browser height, using CSS zoom property? [closed]

    how to apply CSS for @Html.DisplayFor?

    Sencha Touch 2: How to handle custom css files while production build?

    How can I add a default to my CSS slide show banner?

    when click on button then show message

    Trying to show list items vertically but two items horizontally

    How to make responsive text that isn't too large or too small

    How to align with css

    How to Get CSS/JavaScript Pop-Up to Transition In

    how to make NGINX serve static content like .js, .css, .html?

    How to avoid css overlapping?

    How to move Woocommerce Description tab below review tab

    How to measure the amount of time an animation took place using JavaScript

    How to indent multiple levels of select optgroup with CSS?

    CSS : How to have an input field auto adjusting its width

    how to create two columns with div and CSS

    How can I slide a image up and down over a background image to create a scanning effect?

    How can I expand this tag?

    show div and execute CSS animation in separate div on “li hover”

    How can I create a full height responsive horizontal scrolling list of images with CSS

    How to draw grid around irregularly arranged web elements?

    How to reserve a DIV width with “left:100%” CSS rule

    How do i select all nodes and apply a css style to all of them, D3

    how to add a CSS attribute just for specific time via JQuery (revert back to normal after 2 sec)

    How do I get Aptana Plugin for Eclipse to validate against CSS3, rather than CSS2?

    How to use CSS to select an element only if a specific element comes after the one you want to select?