3

メニューがあり、各メニュー項目は CSS で設定されたクラスを持つスパンです。

.newClass {color: red}

.oldClass {color:black} oldClass:hover {color:blue;}

メニュー項目をクリックすると、クラスが次のように変更されます $(this).removeClass('oldClass').addClass('newClass'); 。これは正常に機能します。

別の menuItem がクリックされると、クラスを現在のメニュー項目に戻します。 $(this).removeClass('newClass').addClass('oldClass');

問題は、クラスが変更されたときに、メニュー項目にマウスを合わせるまで変更が反映されないことです。そのため、メニュー項目の色は、マウスでマウスを合わせるまで赤のままで、その後青のホバーで黒に戻ります。

何が起こるべきかについては、コメントの Gaby の例を参照してください。

これが私の実際のコードです：

$('.headingRev').removeClass('headingRev').addClass('heading');
$(this).removeClass('heading').addClass('headingRev');

そしてここにcssがあります：

.heading {color: #bb1f1a;}
.heading:hover {color: #e9b49e;text-decoration:none;}
.headingRev {color: #e9b49e;}

4

2 に答える 2

1

考えられる問題は、現在のメニュー項目から選択を削除する方法にある可能性があります..

thisクリック内から実行している場合は使用しないでくださいthis。以前の現在の要素ではなく、クリックされた要素を指すためです。その場合は使用する必要があります$('.newClass').removeClass('newClass').addClass('oldClass');

http://www.jsfiddle.net/khGRW/で機能するコードを参照してください。

アップデート

わかりました..テキストを画像またはキャンバス要素に置き換えるCufonを使用しています..

これにより、通常の DOM の変更に応答しなくなります。

DOM の現在の状態に従ってメニューを強制的に再描画するにはCufon.refresh('#content')、クラスを要素 (現在はhovereventの下にない) に変更した後に を呼び出す必要があります。

彼らはそのhoverオプションをサポートしているので、効果は自動的に処理されますが、それはCufon側からのDOM監視が終了する場所です..

于 2010-10-13T01:53:01.770 に答える
0

このアプローチを試してください：

<ul>
<li class="ordinary">Menu 1</li>
<li class="ordinary">Menu 2</li>
<li class="ordinary">Menu 3</li>
</ul>

$('ul li').click(function(){
  $('ul li').removeClass("highlight").addClass("ordinary");
  $(this).removeClass("ordinary").addClass("highlight");
});
  1. メニュー項目をクリックすると、すべてのメニュー項目が通常のクラスになります
  2. クリックされたメニューをハイライトクラスにする
于 2010-10-14T00:08:58.297 に答える