JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.classList.toggleでクリックしたボタンを識別して表示の切り替え

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.classList.toggle()

JavaScriptの.classList.toggleでクリックしたボタンを識別して表示の切り替え

JavaScriptの.classList.toggleでクリックしたボタンを識別して表示の切り替え

複数のボタンを設置して、どれかのボタンクリックで表示を切り替える時に、そのボタンを「ON」にする表示をネイティブのJavaScriptで書いてみます。

.classList.toggle()と.classList.remove()

この記事では、ループの中で .classList.toggle().classList.remove() を使い、class名を切り替えます。この2つについて解説します。

.classList.toggle()

.classList.toggle() は、classを追加・削除をON・OFFを切り替えるメソッドです。

Element.classList.toggle('class名');

classを切り替えるのにも簡単で便利なメソッドです。

.classList.remove()

.classList.toggle() は、上述の通り classを追加・削除をON・OFFのトグルで切り替えるメソッドですが、.classList.remove() は指定したclass名を削除します。

Element.classList.remove('削除するclass名');
かかかず
かかかず

複数指定の場合は 'test1', 'test2' のように「,」で区切ります。jQueryのように半角スペースで指定するとエラーが出ます。

クリックで表示が切り替わるサンプル

早速サンプルですが、ボタンをクリックするとそのボタンの表示が都度切り替わります。

この記事のスニペットではボタンの表示だけ切り替わりますが、クリックイベントでボタン以外の要素を切り替える時。例えば、ボタンクリックでコンテンツの表示を切り替える時、有効になっているものを可視化させる時に使います。

サンプルのコード

コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。

HTML

HTMLは、nav タグで親を作り、その中に button タグを6つ作っています。

<nav class="changeButton">
	<button class="btnToggle activeOn">ボタンその1</button>
	<button class="btnToggle">ボタンその2</button>
	<button class="btnToggle">ボタンその3</button>
	<button class="btnToggle">ボタンその4</button>
	<button class="btnToggle">ボタンその5</button>
	<button class="btnToggle">ボタンその6</button>
</nav>

ボタンのclass名には、JavaScriptのトリガーになる「btnToggle」のclass名をつけ、ページ表示をした時に最初のボタンがONになるよう、1個目のボタンだけに「activeOn」をつけています。

かかかず
かかかず

親は nav タグじゃなく、div タグでも問題ありません。

JavaScript

JavaScriptは、「btnToggle」のclassが付いた button タグを取得して、for文のループでクリックしたボタンに .classList.toggle で「activeOn」のclassを付けます。

  const btn = document.getElementsByClassName('btnToggle');

  for (var i = btn.length - 1; i >= 0; i--) {
    btnAction(btn[i],i);
  }
   // activeOnを付ける
  function btnAction(btnDOM,btnId){
    btnDOM.addEventListener("click", function(){
    this.classList.toggle('activeOn');

    // activeOnを全て外す
    for (var i = btn.length - 1; i >= 0; i--) {
      if(btnId !== i){
        if(btn[i].classList.contains('activeOn')){
          btn[i].classList.remove('activeOn');
        }
      }
    }
  })
}

そして、もう一回for文のループで元々「activeOn」のclassが付いているボタンから、.classList.remove で「activeOn」のclassをボタンから外します。

かかかず
かかかず

for文では、ボタンの数分だけループが回るよう .length で要素(ボタン)の数を取得しています。

CSS

CSSは、Flexboxでボタンを並べる記述と、ボタンクリックでボタンの色を変える記述のみです。

nav.changeButton {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}
nav.changeButton button {
    display: inline-block;
}
/* ボタンクリック後 */
button.btnToggle.activeOn {
    background: #545454;
    color: #f0db40;
    pointer-events: none;
}

ボタンクリックで「activeOn」のclass名がついたら、再度そのボタンを選択できないよう pointer-events: none; を付与してクリックしないようにしています。