マンガでわかるホームページ作成

クリックしたら特定の要素にclassをつける方法

こっちの要素をクリックしたときにあっちの要素を変化させたい!あっち要素にclassさえつけばCSSで調整できるのに!

という要望を実現できます。

私は地方でWebデザイナーを9年ほどやっているものです。
私も上記のような思いに駆られ、実装したことがあります。

クリックしたら特定の要素にclassをつける方法を紹介します。

結論:jQueryを利用する

残念ながらCSSだけではムリです。jQuery(javascript)を利用します。

とはいっても数行で済みますので簡単です。

A
B

AをクリックするとBにclass="C"がつき、背景色が変わります。

DevToolsを使うとでclass="C"がついたりきえたりするのが確認できます。

html

<div class="A">A</div>
<div class="B">B</div>

CSS

.A,.B{
    background: #CCC;
    padding: 10px;
    margin: 10px;
}
.A{
    cursor: pointer;
}
.C{
    background: green;
}

jQuery

<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
    $(".A").click(function() {
        $(".B").toggleClass("C");
    });
});
</script>

jQueryの書き方解説

jQueryファイルを読み込ませる

まずhtml内でjQueryファイルを読み込みます。ここでは「https://code.jquery.com/」サイトから読み込んでいますが、jsファイルを右クリックからダウンロードして自分のサーバに置いても大丈夫です。

jQueryファイルを読み込ませたにjQueryを書きます。順番が重要です。jQueryファイルを読み込ませる行の前にjQueryを書くと動きません。また、jQueryファイルが古いバージョンのときも動かない場合があります。

次にjQueryを書きます。jQueryは例ではhtml内に直書きしていますが、別ファイルにしてもかまいません。別ファイルにする場合、その別ファイル内には<script>タグは不要になるので注意しましょう。

クリックしたら離れた要素のclassを変化させる方法

さて、ここからが本題です。以下の部分について解説します。(説明するところだけ抜粋しています。)

$(".A").click(function() {
    $(".B").toggleClass("C");
});

$(".A").click とは「class="A" がクリックされたとき」という意味です。このかっこ内ですが、CSSセレクタ同様の指定ができます。

指定例

  • $(".A").click
  • $("#A").click
  • $("ul.A>li").click
  • $("ul.A>li:nth-of-type(2n+1)").click
  • $("div::after").click
    などなど・・・

$(".B")の部分も先に挙げたようにCSSセレクタ同様の指定ができます。また、クリックした要素自身を対象にしたい場合は $(this) と指定することもできます。""がなくなるので注意です。

.toggleClass("C") はclass="B"に「class="C"がなければ追加し、あれば消す」という意味です。「.Cをつけたりはずしたりする」というとわかりやすいでしょうか。
ページ内にあるすべてのclass="B"がいっせいに変化します。

("C") の「C」はclass名です。つけたいclass名を自由に設定しましょう。

以下は間違った例です。
記号があるかないかで動かなくなるので注意です。

NG例

  • toggleClass("C")
  • .toggleClass(C)
  • .toggleClass(".C")

実践

以上を踏まえて、まずはコピペで自分のサイトに貼り付けましょう。それから()内を自分の実現したい内容に合わせて変更しましょう。

次に動いたかどうか確認しましょう。ローカル環境でも確認できます。
DevToolsからclassがついたか確認できます。

CSS崩れの原因特定方法【DevToolsの使い方】

後はCSSのほうをいじるだけです。

以上、クリックしたら特定の要素にclassをつける方法の紹介でした。

関連記事