jqueryによるクリック時のclass名追加

質問

サイドバーのメニューをクリックした際にどのページか分かるように、クリックしたリンクの色を変えたいと思います。

例えばページAリンクをクリックした際にliタグにid=selectを追加し、
他のリンクにもしid=selectがついている場合は、削除するという処理を
jQueryで行いたいのですが、どのように記述すればよろしいでしょうか？
分かる方、ご教授お願いします＞＜

■HTML
-----------------------------------
<div id="sidebar">
<ul>
<li><a href="">ページA</a></li>
<li><a href="">ページB</a></li>
<li><a href="">ページC</a></li>
<li><a href="">ページD</a></li>
</ul>
</div>

■CSS
-----------------------------------
#sidebar li a {
color: #F00;

}

#select a {
color: #0F0;
}

回答No.1

neko-ten · ベストアンサー

追加するのはidじゃなくてclassにすべき。
IDだと一時的に重複する可能性が存在してくるため適切ではありません。
classであれば複数の属性をつけることもできるため、デザインでわざわざIDを使う理由はないです。

前提としてはアンカーを使うもののページ遷移を伴わない作りじゃないといけないですね。
基本的にはaddClass/removeClassを使うことになります。動きは読んでそのままです。

$("#slider a").click(function(){
//#sliderの子要素になっているliでclassにselectがある場合はselectを除去
$("#slider li.select").removeClass("select");
//クリックしたaの親要素になっているliにselectを付加
$(this).parent("li").addClass("select");
})

簡単にはこんなもんでいいと思う。

どうしてもIDでってことだと、attrを使って直接書き換えになります。

$("#slider a").click(function(){
$("#slider li#select").attr("id","");
$(this).parent("li").attr("id","select");
})

回答No.2

neko-ten

sliderじゃないsidebarだった・・
今作ってるのと混同してしまった・・・

$("#sidebar a").click(function(){
$("#sidebar li.select").removeClass("select");
$(this).parent("li").addClass("select");
})

$("#sidebar a").click(function(){
$("#sidebar li#select").attr("id","");
$(this).parent("li").attr("id","select");
})

申し訳ないです・・・