2

私はこのメニューを持っています

            <ul id="menu" class="clearfix">
                <li>
                    <a href="">Product 1</a>
                </li>
                <li>
                    <a href="">Product 2</a>
                </li>
                <li>
                    <a href="">Product 3</a>
                </li>
                <li class="last">
                    <a href="">Product 4</a>
                </li>
            </ul>

この効果を出したいです。ページに入ると、メニュー項目のテキストの色は白になります。1つのアイテムをクリックすると、そのアイテムがアクティブになり（白い色のテキストを保持）、他のすべてのアイテムの色が灰色に変わります。また、1つのアイテムにカーソルを合わせると、影響を受けるアイテムは他のすべてのアイテムになります。

.addClassを試してみましたが、現在のアイテムにアクティブなクラスを追加することしかできませんでしたが、最初のクリック後にアクティブでない他のクラスを変更することはできませんでした。

誰もがこれに対する最良のjqueryアプローチを知っていますか？

4

4 に答える 4

2 
$("#menu li").hover(function() {
    $(this).removeClass('grey').siblings().addClass('grey');
}, function() {
    $(this).addClass('grey').siblings('.active').removeClass('grey');
    //
}).on('click', function() {
    $(this).removeClass('grey').addClass('active').siblings().addClass('grey').removeClass('active')
});​

http://jsfiddle.net/y7Cn5/

于 2012-11-14T18:36:04.450 に答える
1

おそらくこのようなもの：

ホバー機能で更新

jsFiddle

$("#menu > li").on("click", function(e) {
    e.stopPropagation();
    $(".active").removeClass("active");
    $(this).removeClass("non-active").addClass("active").siblings().addClass("non-active");
})
.hover(function(e) {
    $(".non-hover").removeClass("non-hover");
    $(this).addClass("hover").siblings().addClass("non-hover");
}, function(e) {
    $(".hover, .non-hover").removeClass("hover non-hover");
})

これで質問に答えられない場合、質問は理解されておらず、言い換える必要があります。これが質問で尋ねられるすべてです。

于 2012-11-14T18:31:02.277 に答える
0

ここに行きます（兄弟）同じノード内の他のすべてのアイテムを選択します

$("#menu li").click(function(){
  $(this).addClass("active").css("color","white")
  $(this).siblings().css("color","gray")
})
于 2012-11-14T18:27:31.087 に答える
0

試す

$("#menu > li").hover( function( ) {
    $(this).removeClass("hovered").siblings().addClass("hovered");
}, function( ) {
    $(this).addClass("hovered");
});

$("#menu > li").click( function( ) {
    $(this).addClass("active").siblings().removeClass("active");
});
于 2012-11-14T18:44:55.937 に答える