CODEWITHSUNDEEP
jquerycss
Jigar Jain
Jigar Jain

Reputation: 1447

Applying CSS to navigation using jQuery

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)

Upvotes: 2

Views: 104

Answers (2)

Ando
Ando

Reputation: 11409

http://jsfiddle.net/v6LA9/

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

Upvotes: 2

Guanlun
Guanlun

Reputation: 1608

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");
});

Upvotes: 3

Related Questions