jquery - 使用 jQuery 将 CSS 应用于导航

Question

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

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

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

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