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)
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");
});
$(function() {
$('button').click(function() {
$('button').removeClass("selected");
$(this).addClass("selected");
});
})
This is a function affection all you button elements - it will remove the "selected class from all the buttons and add it to the clicked button.
