0

縦型メニューがあります。.glossymenuです。メニュー項目には、cssを.glossymenua.menuitemとして使用してアクセスします。メニュー項目が選択されているとき、またはメニュー項目がアクティブなときに背景色を変更したい。次のJQueryを使用しようとしています。

$(".glossymenu a.menuitem").click(function(){
  $(this).siblings(".active").removeClass("active");
  $(this).addClass("active");
});

しかし、これを使用して問題を解決することはできません。メニュー項目が選択されたときに、メニュー項目の背景色を変更する方法。メニューがアクティブなときに、空白領域のメニュー項目の外側をクリックしても変更されないはずです。ありがとう、プラサド

4

3 に答える 3

1

これがあなたのhtmlがどのように見えるかを仮定します：

<ul class="glossymenu">
    <li><a class="menuitem active" href="#">Item</a></li>
    <li><a class="menuitem" href="#">Item</a></li>
    <li><a class="menuitem" href="#">Item</a></li>
</ul>​

また、CSS は次のようになります。

.glossymenu li {
    margin-bottom: 20px;
}

.glossymenu a {
    background-color: pink;
    padding: 5px 10px;
}

.glossymenu .active {
    background-color: #bada55;
}​

次に、jsは次のようになります。

$('.glossymenu .menuitem').on('click', function(e) {
    e.preventDefault();
    $('.glossymenu .active').removeClass('active');
    $(this).addClass('active');
});

あなたが抱えていたかもしれない問題はsiblings()、クリックされたアンカーの兄弟ではないため、他のアンカータグを選択しないことです。

jsFiddle: http://jsfiddle.net/Vestride/qhSQ4/

編集：

私はあなたのために新しいjsfiddle（リンク）を作成しましたが、あなたが何をしようとしているのか、スクリプトをより一般的にすることで何を意味しているのかについて、私はまだ非常に混乱しています.

多分これはあなたの問題を解決するのに役立ちます。http://sixrevisions.com/javascript/20-excellent-javascript-navigation-techniques-and-examples/

于 2012-07-13T06:04:45.380 に答える
0

jQueryのホバー機能を使いたいと思います。

$(".glossymenu a.menuitem").hover(function(){
  $(this).siblings(".active").removeClass("active");
  $(this).addClass("active");
}, function() {
  $(this).removeClass("active");
});
于 2012-07-13T05:49:21.413 に答える
0

アクティブな状態は CSS で利用可能であり、代わりにそれを使用する方がはるかに優れています。

a.menuitem:active { background-color: #c00; }
于 2012-07-13T06:08:21.553 に答える