クリックした<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 · ベストアンサー

$(this).toggleClass("check");だと、クリックされた<a>のクラスが
反転するだけですから、全部一旦はずした上で、クリックされた<a>
だけに付加すればよいでしょう。

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

お礼

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

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

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

回答No.3

my--

取り付けた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--さん、ご回答ありがとうございました。

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

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

回答No.1

metametamu

input要素のラジオボタンではダメなのでしょうか？
label要素と組み合わせれば無意味にa要素を使わなくても済みますし。

お礼

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

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

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