クリックされたリンクの色を変更したり、それ以外の色を戻したりしたい

Question

• １つをクリックすると色が変わる。
• 別のボタンをクリックするとそれの色が変わり、最初にクリックしたボタンの色は初期の色に戻る
• ホバーではなくクリックしたら色は次のボタンがクリックされるまでそのまま

のような実装をしたいです。
例
何もしていない状態
ボタン　ボタン　ボタン　ボタン　ボタン

↓

クリック
ボタン　ボタン　ボタン　ボタン　ボタン

↓

別のボタンをクリック
ボタン　ボタン　ボタン　ボタン　ボタン

↓

さらに別のボタン
ボタン　ボタン　ボタン　ボタン　ボタン

のような感じです。

現在のソースです。

<tr class="is-sorter" id="aaa">
						<th>
							<a href="?r1=1#aaa" class="is-desc">A 降順</a>
							<a href="?r1=0#aaa" class="is-asc">A 昇順</a>
						</th>
						<th>
							<a href="?r2=1#aaa" class="is-desc">B 降順</a>
							<a href="?r2=0#aaa" class="is-asc">B 昇順</a>
						</th>
						<th>
							<a href="?r3=1#aaa" class="is-desc">C 降順</a>
							<a href="?r3=0#aaa" class="is-asc">C 昇順</a>
						</th>
						<th>
							<a href="?r4=1#aaa" class="is-desc">D 降順</a>
							<a href="?r4=0#aaa" class="is-asc">D 昇順</a>
						</th>
```ご教授のほどよろしくお願いいたします。

追記
回答者様のコードをお借りしてます。
```js
$(function(){
  var sortkey=location.search+location.hash;
  $('a[href="'+sortkey+'"]').css({"background-Color":"red"});
});

この記述の仕方でcssの部分をaddClassでクラスの追加は可能でしょうか？

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[MeB]

ご指摘ありがとうございます。

[arasi]

やってみれば

[MeB]

できました

Answer 1

まず一般的な「ボタン」がhtmlソースとして提示されていません
アンカーをボタンとして見立てるのでしょうか？
そのさいアンカーを押すとページの遷移が入るので、通常のjavascriptでは
飛び先の制御ができませんので、load時にlocation.searchやlocation.hash値を見て
色を変えることになります
普通はクリックした時にサーバー側でactiveを付けるものだと思いますが
どうしてもクライアントサイドのjavascriptでやりたいのでしょうか？

sample

$(function(){
  var sortkey=location.search+location.hash;
  $('a[href="'+sortkey+'"]').css({"background-Color":"red"});
});

<table>
<tr class="is-sorter" id="aaa">
<th>
<a href="?r1=1#aaa" class="is-desc">A 降順</a>
<a href="?r1=0#aaa" class="is-asc">A 昇順</a>
</th>
<th>
<a href="?r2=1#aaa" class="is-desc">B 降順</a>
<a href="?r2=0#aaa" class="is-asc">B 昇順</a>
</th>
<th>
<a href="?r3=1#aaa" class="is-desc">C 降順</a>
<a href="?r3=0#aaa" class="is-asc">C 昇順</a>
</th>
<th>
<a href="?r4=1#aaa" class="is-desc">D 降順</a>
<a href="?r4=0#aaa" class="is-asc">D 昇順</a>
</th>
</table>

Comments

[MeB]

返事が遅くなり申し訳ございません！
質問に不備がありすみませんでした。
sampleで教えてくださったもの正常に動いたのですが、
こちらをcss指定で動かすことは可能でしょうか？
$('a[href="'+sortkey+'"]')
現在はaタグですがis-desc:afterなど擬似クラスにも適応できますでしょうか？
よろしくおねがいいたします。（自力では動きませんでした…）

[MeB]

単純に$('a[href="'+sortkey+'"]').addClass({"active"});のような感じでクラスの追加は可能でしょうか？

Answer 2

$('a.is-desc[href="'+sortkey+'"]').addClass('active');