jQueryでメニューのアクティブ状態の切替実装

よくメニューが並んでいるものをクリックしたときに、ボタンやメニューの色がかわって、ここが選択されてますよというような状態にするためのtips。
いつも見るようなメニューのアクティブの切替ロジックです。

  • クリックされたら選択されたことがわかる状態にする
  • 複数のメニューからクリックされたときに選択されている状態のものは1つのみ
  • 選択されているものをクリックしても特に何も行わない

Codepenでたたき台を作成したので紹介しておきます。

See the Pen jQuery Toggle menu button by Yuya Tanaka (@laddy) on CodePen.

いつも同じようなものを作っているような気がします。