【JS仕様】タブやボタンに対応するコンテンツを表示切り替えする

タブやボタンでの内容の表示切り替えを実装する機会って、ちょいちょいありますよね。

もちろん、JSを使用せずにHTMLとCSSだけで制作する方法もあります。
ちなみに私のポートフォリオでも使用してたりします。

フリーになった直後のにかいたコードなのでポートフォリオのコードが今見ると微妙で（コーダーあるあるだと思いますがｗ）お恥ずかしいですが、以下のサイトのような感じで<input>のidと<label>のforを利用し、CSSで隣接する要素（input:checked ~ 対象のコンテンツ）に対してCSSをあてる、といった感じで実装することも可能です。

ポートフォリオ

上記のやり方だと個人的にデメリットだと思う部分があって、
それは隣接要素にCSSをあてる都合上、HTMLの記述が少し煩雑になる（ボタン郡をdivで囲むことができない）ところです。
ページ内の好きな場所にボタンを配置することが難しいので、困ったことにちょっとフリーダムなデザインがくると対応しきれなかったりします。

あとこの場合、見た目の関係でinputくんにはdisplay: none;で消えてもらうことになるので、何かあんまり気持ちが良い書き方ではないのかな？と思ったりしてます。（※あくまで、個人の感想です。）

と、いうことで、
ボタンが好きな場所に配置でき、なおかつボタンが複数あっても対応できるようなJSをかいてみました。

See the Pen タブ（ボタン）に対応するコンテンツを切り替え表示 by あお＠Webコーダー🐾 (@coder_ao) on CodePen.

複数配置したボタンもカレント表示に対応するようにしました。（レスポンシブまでは対応してないです。。。）

ボタンやタブ部分（js-switchingTab）

ボタンやタブにあたる要素には、.js-switchingTabというクラスを付与しておく。
初期値にしたいボタンやタブには、.is-currentというクラスを付与しておく。こちらのクラス名はJSでつけ外しを制御しています。
ボタンやタブの要素には、data-switch-tabというデータ属性を付与する。こちらの値と、data-switch-contentsの値が等しいコンテンツを表示する、といった仕組みです。

コンテンツ部分（js-switchingContents）