Question

I have 4 navigation buttons and i am designing a single page vertical site..

When user clicks button 1, i wish to highlight it by applying CSS which is pretty simple.. But then if user clicks button3 then how do i apply same CSS to that button(highlight) and remove the CSS which i had applied to button1(unhighlight)

Answer 1

For example you have this for html part:

<ul id="nav_bar">
    <li id="item1">Item 1</li>
    <li id="item2">Item 2</li>
    <li id="item3">Item 3</li>
    <li id="item4">Item 4</li>
</ul>

And you have this for css:

#nav_bar li {
    // some style here
}

.nav_item_clicked {
    // something else here
}

And the jQuery part:

$("#nav_bar li").click(function() {
    $("#nav_bar li").removeClass("nav_item_clicked");
    $(this).addClass("nav_item_clicked");
});