JavaScriptでクリックしたときにクラスを追加したい

html
1<table>
2<tr class="is-sorter" id="aaa">
3<th>
4<a href="?r1=1#aaa" class="is-desc">A 降順</a>
5<a href="?r1=0#aaa" class="is-asc">A 昇順</a>
6</th>
7<th>
8<a href="?r2=1#aaa" class="is-desc">B 降順</a>
9<a href="?r2=0#aaa" class="is-asc">B 昇順</a>
10</th>
11<th>
12<a href="?r3=1#aaa" class="is-desc">C 降順</a>
13<a href="?r3=0#aaa" class="is-asc">C 昇順</a>
14</th>
15<th>
16<a href="?r4=1#aaa" class="is-desc">D 降順</a>
17<a href="?r4=0#aaa" class="is-asc">D 昇順</a>
18</th>
19</table>

上記のコードでaタグがクリックされたときにactiveというクラスを追加したいです。
is-descやis-ascはのこしたままで、ラジオボタンのように
クリックされたらactiveがつき別をクリックするとそこにactiveがつき
もともとactiveが付いていたところは外れるようにしたいと思っております。

表現がうまくできず申し訳ございません。
ご教示のほどよろしくお願いいたします。

行動規範の内容に同意します

回答4件

100786の質問とどう違うのでしょうか？

投稿2017/11/21 04:11

yambejp

総合スコア114839

前の質問にも少し書きましたが、手順はこうです。

a要素をクリック（ページ遷移が発生）
ページ読み込み時にlocation.searchでクエリを取得
$('.is-sorter a').each(function(){で各a要素のhrefを比較
一致したa要素にactiveクラスをaddClassする

前回の質問から間もなく質問してるようですが、多少は自分でその方法を調べ（jQueryの情報なんてどこにでもあります）、間違っていてもいいので自分で試してみたコードを提示すると丸投げなどと言われずに済むと思いますよ。

投稿2017/11/21 04:24

退会済みユーザー

総合スコア0

自己解決

失礼いたしました。
前回の質問にまとめます。
後日、質問の重複のため削除依頼いたします。

投稿2017/11/21 05:22

MeB

総合スコア104

jQuery有りの場合 :
参考 : JS　クリックイベントについて　WP

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>active付与_2</title>
6    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
7    <style>
8    .active::after {
9      content : " : active";
10    }
11    </style>
12    <script>
13    $(window).on("load",function(){
14      $("a").on("click",function(){
15        $(".active").removeClass("active");
16        $(this).addClass("active");
17      });
18    })
19    </script>
20  </head>
21  <body>
22    <table>
23    <tr class="is-sorter" id="aaa">
24    <th>
25    <a href="#aaa" class="is-desc">A 降順</a>
26    <a href="#aaa" class="is-asc">A 昇順</a>
27    </th>
28    <th>
29    <a href="#aaa" class="is-desc">B 降順</a>
30    <a href="#aaa" class="is-asc">B 昇順</a>
31    </th>
32    <th>
33    <a href="#aaa" class="is-desc">C 降順</a>
34    <a href="#aaa" class="is-asc">C 昇順</a>
35    </th>
36    <th>
37    <a href="#aaa" class="is-desc">D 降順</a>
38    <a href="#aaa" class="is-asc">D 昇順</a>
39    </th>
40    </table>
41  </body>
42</html>

プラグイン無しの場合 :

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>active付与_1</title>
6    <style>
7    .active::after {
8      content : " : active";
9    }
10    </style>
11    <script>
12      addEventListener("load",function(){
13        Array.prototype.forEach.call(
14          document.getElementsByTagName("a"),
15          function(anc,i,arr){
16            anc.addEventListener("click",function(){
17              Array.prototype.forEach.call(arr,function(els){
18                els.classList.remove("active");
19              });
20              anc.classList.add("active");
21            });
22          });
23      });
24    </script>
25  </head>
26  <body>
27    <table>
28    <tr class="is-sorter" id="aaa">
29    <th>
30    <a href="#aaa" class="is-desc">A 降順</a>
31    <a href="#aaa" class="is-asc">A 昇順</a>
32    </th>
33    <th>
34    <a href="#aaa" class="is-desc">B 降順</a>
35    <a href="#aaa" class="is-asc">B 昇順</a>
36    </th>
37    <th>
38    <a href="#aaa" class="is-desc">C 降順</a>
39    <a href="#aaa" class="is-asc">C 昇順</a>
40    </th>
41    <th>
42    <a href="#aaa" class="is-desc">D 降順</a>
43    <a href="#aaa" class="is-asc">D 昇順</a>
44    </th>
45    </table>
46  </body>
47</html>