jQuery nav上のクラスの追加/削除

Question

リンク上に異なるクラスを作成して、クリックすると別のイメージを表示する方法を教えてください。

リンクには独自の色があり、アクティブなときは同じ色の小さな矢印が必要です。

これは私がこれまで持っているものです。

HTML：

<ul> 
    <li class="red"><a href="#">Link one</a></li> 
    <li class="blue"><a href="#">Link two</a></li> 
</ul> 

CSS：

.red {background-color:#f00; } 
.red_bnt { background-image:url(image/red_bnt_pil.png); } 

.blue {background-color:#00f; } 
.blue_bnt { background-image:url(image/red_bnt_pil.png); } 

のjQuery：

<script type="application/x-javascript"> 

$('.red').click(function(){ 
    $('.red').removeClass('red_bnt'); 
    $(this).addClass('red_bnt'); 
}); 

</script> 

それから、青色についても同様にそれを繰り返します。

しかし、それは私が間違って何をやっている...

が動作していませんか？

Answer 1

$('.red').click(function(){ 
    $('.red').removeClass('red_bnt'); 
    $(this).addClass('red_bnt'); 
}); 

はあなたのjQueryのは、クラス「赤」を持つ要素がクリックされたときに、「赤」クラスを持つすべての要素からクラス「red_bnt」を削除して、クリックされた要素にred_bntを追加することを言っています。青いボタンはクラスが赤ではないので、決して式に入りません。その代わりに、ボタンに共通のクラスを追加し、背景CSSをアクティブにする「アクティブ」などの共通のクラス名を使用します。

私はにあなたのCSSを変更したい：に

<ul> 
    <li class="red btn"><a href="#">Link one</a></li> 
    <li class="blue btn"><a href="#">Link two</a></li> 
</ul> 

とjQuery：

.red.btn {background-color:#f00; } 
.red.hover, 
.red.active { background-image:url(image/red_bnt_pil.png); } 

.blue.btn {background-color:#00f; } 
.blue.hover, 
.blue.btn.active { background-image:url(image/blue_bnt_pil.png); } 

HTMLに

<script type="application/x-javascript"> 
$(function() { 
    $('li.btn').click(function(){ 
     // Add "active" to the clicked element and 
     // get all siblings and remove "active" from them 
     $(this).addClass('active').siblings().removeClass('active'); 
    }); 

    // Use this for hover 
    $('li.btn').hover(function() { 
     $(this).addClass('hover'); 
    }, function() { 
     $(this).removeClass('hover'); 
    }); 
}); 
</script> 

は、ここでそれをjsFiddleです：http://jsfiddle.net/FS4Du/。私はあなたのイメージの代わりに暗い色とdodgerblue色を使用しました。

注：クリックした要素（アクティブな要素）を上に置いた場合を処理する必要がないように、アクティブな要素を再利用する代わりに、ホバークラスを使用しました。両方のクラスに同じ画像を使用してウル

Answer 2

私の事,,

.red_bnt { background-image:url(image/**red_bnt_pil.png**); } 

.blue {background-color:#00f; } 
.blue_bnt { background-image:url(image/**red_bnt_pil.png**); } 

........................... ...