jQuery & CSS：択一ハイライトメニュー

まずこちらサンプルをごらんください。

See the Pen jQuery menu hightlight by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

クリックしたメニュー項目をハイライト表示する仕組みです。

HTMLなどはサンプル画面から見ていただけますがJavaScriptのみ抜粋すると下記になっています。

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

コードの仕組みとして、「#menu」内のリンクをクリックしたら、「#menu」内のリンクすべてから一旦クラス「active」を除去して、クリックされたリンクにのみクラス「active」を付与することで、クリックしたもののみハイライト表示するという考え方です。

そのうえで下記のサンプルをごらんください。

See the Pen CSS select menu by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

こちら冒頭のものと見た目も動作も全く同じですが、JavaScriptを利用していません。
CSS3のみで実現しています。CSSだけなのでこちらの方が動作が軽いです。

見た目は同じですがHTMLが異なり、こちらはラジオボタンとラベルタグで構成されています。ラベルをリンクのように扱い、ラジオボタン自体は非表示としています。

CSS内でのキモは下記の部分。

input[type=radio]:checked+label {
  background: #ccc;
  color: #000
}

「チェックの付いているラジオボタンに隣接しているlabel」を対象としたスタイル指定です。
HTMLでもlabelの中にinputを入れず、inputをlabelの先に出しているのはこのためです。

フォームでもないのにフォームパーツを使うのはいかがなものかと賛否はありえますが、表現的にはこの程度のことはJSを使わずCSSのみで出来るという例でした。