使用jQuery将CSS应用于导航

Question

我有4个导航按钮，我正在设计单页垂直网站..

当用户点击按钮1时，我希望通过应用CSS来突出显示它，这非常简单..但是如果用户点击button3，那么我如何将相同的CSS应用于该按钮（突出显示）并删除我已应用的CSS到button1（取消高亮）

Answer 1

例如，你有这个用于html部分：

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

你有这个用于css：

#nav_bar li {
    // some style here
}

.nav_item_clicked {
    // something else here
}

jQuery部分：

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

Answer 2

http://jsfiddle.net/v6LA9/

$(function() {
    $('button').click(function() {
       $('button').removeClass("selected");
       $(this).addClass("selected");
    });
})​

这是一个对所有按钮元素感兴趣的功能 - 它将从所有按钮中删除“选定的类并将其添加到单击的按钮。