-1

このページの上部にある灰色のStackOverflowリンクを見てください。ロゴの右側にあるもの。「質問」、「タグ」、「ユーザー」、「バッジ」、「未回答」と表示されます。私の質問を表示しているので、「質問」リンクがオレンジ色になっていることに注目してください。

クリックするとjQueryを実行する5つのリンクがあります。別のページにリダイレクトされることはありません。

<a class="english"></a>
<a class="science"></a>
<a class="languages"></a>
[ect.]

selectedクリックしたリンクにクラスを追加するだけです。次に、別のリンクをクリックしたら、最初のリンクの元のクラスを削除して、selectedクリックした新しいリンクに追加します。

たとえば、[をクリックすると、クラスが<a class="english"></a>追加されます。selected

次に、をクリックしたら、からクラスを<a class="science"></a>削除し、にselectedクラス<a class="english"></a>を追加selectedし<a class="science"></a>ます。

前もって感謝します！：]

4

3 に答える 3

3

このようなもの（テストされていません）：

$('a').click(function() {
  $('.selected').removeClass('selected'); // remove all 'selected' classes
  $(this).addClass('selected');           // add selected class to clicked item
});

これはすべてのアンカータグに影響することに注意してください。「メニュー」項目をより具体的にするには、より具体的なセレクターを使用する必要がある場合があります。$('a')

編集

問題が発生しているので、ここでこのコードのフィドルを作成しました。アイテムをクリックするたびにテキストの色が表示されます。

于 2013-03-26T12:12:37.290 に答える
2

リンクをクリックすると、コンテナ内のすべてのリンクを取得し、それぞれのクラスを削除してから、クリックしたばかりのリンクにクラスを追加できます。selectedselected$(this)

于 2013-03-26T12:09:07.293 に答える
1

必要なjqueryメソッドはaddClassとremoveClassです

<div class='english selectable'>English</div>
<div class='french selectable'>French</div>

$(".selectable").click(function(){
    $(".selected").removeClass("selected");
    $(this).addClass("selected");
});

ここで試してみてください：http：//jsfiddle.net/p4sVN/

于 2013-03-26T12:14:57.807 に答える