クリックした<a>タグのみにClass名を付けたい

複数ある<a>タグの内、クリックした一つだけにClass名を付けたい場合はどうすればよいでしょうか？

ソースは以下のようになっています。

<ul id="menu">
<li><a href="#">北海道</a></li>
<li><a href="#">東北</a></li>
<li><a href="#">関東</a></li>
</ul>

「北海道」をクリックした場合　<a href="#" class="check">北海道</a> となり
次に「東北」をクリックした場合は　<a href="#" class="check">東北</a>　となる
そのさい「北海道」についていた　class="check"　は外れる。

といった事をしたいのです。

現状、jQueryで以下のようにしたはいいのですが、複数にclass="check"が付いてしまい、希望の動作になりませんでした。

<script type="text/javascript">
$(document).ready(function(){
$("#menu li a").click(function () {
$(this).toggleClass("check");
});
});
</script>

ぜひ、お教えいただければと思います。

よろしくお願いいたします。

No.2 ベストアンサー 回答者： yyr446 回答日時： 2010/12/24 16:21

$(this).toggleClass("check");だと、クリックされた<a>のクラスが

反転するだけですから、全部一旦はずした上で、クリックされた<a>
だけに付加すればよいでしょう。

　$(function(){
　　$("#menu li a").click(function () {
　　　$("#menu li a").removeClass("check");
　　　$(this).addClass("check");
　　});
　})

この回答へのお礼

yyr446さん、ご回答ありがとうございました。

お教えいただいた方法で希望通りの動作にできました。
実にシンプルでわかりやすく、助かりました。

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

お礼日時：2010/12/28 15:42

No.3 回答者： my-- 回答日時： 2010/12/24 16:32

取り付けたclass名をそのままにしてると、当然そうなりますよね。

各要素を巡ることをイメージしてみましょう。
クリックされた（target）要素ならclass名を取り付ける。そうでなければ
class名を外してやれば希望の動作になりそうです。単純ですが、これもアルゴリズム。


var list = $("#menu li a"); // 対象要素をリストアップしたjQueryオブジェクト
list.click(function (e) { // イベント関数設置
　var target = e.target; // イベント発生要素
　list.each(function () { // 各要素を巡る
　　if (this === target) $(this).addClass('check'); // targetならclass名を取り付ける
　　else $(this).removeClass('check'); // そうでなければclass名を外す
　});
　return false; // イベントキャンセル
});

この回答へのお礼

my--さん、ご回答ありがとうございました。

非常に勉強になるお答えありがとうございます。
しかし動作をイメージする、というのは理解できたつもりですが
まだまだ浅かったためか、実際動作させる事ができませんでした。

教えていただいたコードの一行一行をちゃんと理解できるよう追求してみようと思います。

お礼日時：2010/12/28 15:48

No.1 回答者： metametamu 回答日時： 2010/12/24 15:52

input要素のラジオボタンではダメなのでしょうか？

label要素と組み合わせれば無意味にa要素を使わなくても済みますし。

この回答へのお礼

metametamuさん、ご回答ありがとうございました。

ソース例はhrefを#にしておりましたが、実際はアンカーリンク先が入るので初めからaタグでと考えてました。
しかしラジオボタンを使うという発想は驚きです。

貴重なアイデアありがとうございました。

お礼日時：2010/12/28 15:27