jquery - jQuery を使用して CSS をナビゲーションに適用する

Question

4 つのナビゲーション ボタンがあり、単一ページの縦型サイトを設計しています。

ユーザーがボタン 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");
    });
})​

これは、すべてのボタン要素に影響する関数です。「選択したクラスをすべてのボタンから削除し、クリックしたボタンに追加します。