JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでクリックした要素にアクティブクラスを追加する方法

Webページのボタンやタブメニューなどでは、現在選択されている要素を視覚的に強調表示したいケースがよくあります。JavaScriptを使えば、クリックされた要素に「active」クラスを動的に追加し、それまでアクティブだった要素からクラスを外すことで、この処理を簡単に実装できます。

実装のポイント

基本的な流れは以下のとおりです。

  • querySelectorAll() ですべてのボタン要素を取得する
  • 各ボタンに addEventListener() でクリックイベントを登録する
  • クリック時に、既存の「active」クラスを持つ要素からクラスを削除する
  • クリックされた要素に「active」クラスを追加する

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    .btn {
        border: none;
        outline: none;
        padding: 10px 16px;
        background-color: #6ea2f0;
        cursor: pointer;
        color: white;
        font-size: 18px;
    }
    .active, .btn:hover {
        background-color: #666;
        color: white;
    }
</style>
</head>
<body>
<h1>アクティブボタンの例</h1>
<div id="sampleDiv">
<button class="btn">Giraffe（キリン）</button>
<button class="btn active">Cow（牛）</button>
<button class="btn">Lion（ライオン）</button>
<button class="btn">Leopard（ヒョウ）</button>
<button class="btn">Cheetah（チーター）</button>
</div>
<h2>いずれかのボタンを押すと、そのボタンがアクティブになります</h2>
<script>
    var btns = document.querySelectorAll(".btn");
    Array.from(btns).forEach(item => {
        item.addEventListener("click", () => {
            var selected = document.getElementsByClassName("active");
            selected[0].className = selected[0].className.replace(" active", "");
            item.className += " active";
        });
    });
</script>
</body>
</html>

コードの解説

  • CSS部分： .btn クラスでボタンの基本スタイルを定義し、.active クラスおよびホバー時には背景色をグレーに変更して選択状態を表現しています。
  • JavaScript部分： document.querySelectorAll(".btn") で全ボタンを取得し、Array.from() で配列化して forEach ループ内でそれぞれにクリックイベントを設定します。
  • クラスの切り替え： クリック時に getElementsByClassName("active") で現在アクティブな要素を特定し、replace(" active", "") でクラスを削除。その後、クリックされた要素に " active" を連結して追加します。

実行結果

上記のコードを実行すると、初期状態では「Cow（牛）」ボタンにアクティブクラスが適用され、グレーで表示されます。

別のボタン（例：「Lion」）をクリックすると、以下のようにクリックしたボタンだけがアクティブ状態に切り替わります。

よりモダンな書き方

近年のブラウザでは、classList API を使うことで、より簡潔かつ安全にクラスを操作できます。

item.addEventListener("click", () => {
    document.querySelectorAll(".btn.active").forEach(el => el.classList.remove("active"));
    item.classList.add("active");
});

classList.remove() と classList.add() を使えば、文字列の置換処理が不要になり、クラス名のスペルミスによるバグも防げます。新しいプロジェクトではこちらの方法を推奨します。

  1. JavaScriptでDOM要素にクラスを追加する方法を解説

    JavaScriptでDOM要素にクラスを追加するには、まず querySelector や getElementById などのメソッドを使って対象の要素を取得し、その後 classList.add() を使ってクラスを追加します。HTMLの例例として、以下のようなHTMLがあるとします。<!DOCTYPE html> <html> <head></head> <body> <p id=para>これはテキストです</p> </body> </html>この p 要

  2. JavaScriptで要素にクラス名を追加する方法をわかりやすく解説

    JavaScriptを使ってHTML要素にクラス名を追加するには、classList.add()メソッドを使用するのが最も簡単で推奨される方法です。この記事では、ボタンをクリックしたときにdiv要素へ新しいスタイル（クラス）を動的に適用する具体例を、コードと実行結果つきで解説します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <sty