jQuery - クラスの追加と削除

Question

状況には、それぞれ専用のクラスを持つ2つのボタンがあります。しかし、aboutボタンをクリックすると、クラスをhighlightaboutクラスに変更し、グラフボタンをクリックするとhighlightクラスをaboutクラスに戻し、グラフクラスをhighlightgraphクラスに変更します。だから私はいずれかのボタンをクリックするとそれに応じて切り替えるでしょう。

が、私はこのスクリプトを持っていますが、それは動作していない理由を私は理解していない：

HTML：

<div id="wrapper"> 
<ul><li><a class="about"><span>About</span></a></li> 
     <li><a class="graph"><span>Graphic Design</span></a></li> 
</ul> 

.CSS：

.about { background:url(../button/about_btn.png) no-repeat left center; width:160px; height:50px; float:left;cursor:pointer} 
.graph { background:url(../button/graph_btn.png) no-repeat left center; width:160px; height:50px; float:left;cursor:pointer} 
.highlightabout {background:url(../button/about_btn.png) no-repeat right center; width:160px; height:50px; float:left; cursor:pointer} 
.highlightgraph {background:url(../button/graph_btn.png) no-repeat right center; width:160px; height:50px; float:left; cursor:pointer} 

スクリプト：

$('.about').click(function() { 
    $(this).removeClass("about").addClass("highlightabout"); 
    $('.graph').removeClass("highlightgraph").addClass("graph"); 
}); 
$('.graph').click(function() { 
    $(this).removeClass("graph").addClass("highlightgraph"); 
$('.about').removeClass("highlightabout").addClass("about"); 
}); 

ありがとうございました。

更新：HTMLを追加しないと非常に残念ですが、私はそれが役に立たないと思いました。 HTML/.CSSも追加されました。

Answer 1

$（ '。グラフ'）。removeClass（ "highlightgraph"）。addClass（ "graph"）;

ことはすべきではない：。。

$（ 'グラフ'）removeClass（ "グラフ"）addClass（ "highlightgraph"）;

Answer 2

$('.about').click(function() { 
    $(this).removeClass("about").addClass("highlightabout"); 
    $('.graph').removeClass("graph").addClass("highlightgraph"); 
}); 

$('.graph').click(function(e) { 
    $('.highlightabout').removeClass("highlightabout").addClass("about"); 
    $(this).removeClass("highlightgraph").addClass("graph"); 
});​ 

このfiddleを試してみてください。

Answer 3

私は解決策を見つけた：

<div id="wrapper"> 
    <ul><li><a id="about_button" class="about"><span>About</span></a></li> 
     <li><a id="graph_button" class="graph"><span>Graphic Design</span></a></li> 
    </ul> 

代わりのクラスを使用して、私はアンカータグのIDを追加しました。したがって、スクリプトは次のようになります。

$('#about_button').click(function() { 
    $(this).removeClass("about").addClass("highlightabout"); 
    $('#graph_button').removeClass("highlightgraph").addClass("graph"); 
}); 

$('#graph_button').click(function() { 
    $(this).removeClass("graph").addClass("highlightgraph"); 
    $('#about_button').removeClass("highlightabout").addClass("about"); 
}); 

jsfiddle