65.クリックした要素に下線を引こう ～ページ内リンクのクリック～
ページ内リンクをクリックした時に、下線を引く。
目にしたことはあるけれど、イマイチどうやって作ればいいのかイメージが湧かない。
要領がわかれば難しいことは無いです。
では早速やっていきましょう。
何を使って実現するのか
今回はHTML、CSS、jQuery(JavaScript)を使います。
大まかな流れは
- 下線が付与されるクラスを定義
- 該当要素のクリックの検出
- 該当要素のクラス削除
- クリックされた要素にクラス追加
ざっくりとこんな感じです。
今回のポイントはクラスの削除とクラスの追加で対象を変えているところです。
HTMLとCSSを作成。下線が付与されるクラスを定義
こちらは、疑似要素なのかボーダーで作るのかはケースバイケースなので
適宜CSSで定義を済ませてください。
.is-active{
border-bottom:1px solid #333;
}
今回はボーダーでサクッとやっていきます。
HTMLはナビゲーションのリンク部分を想定して、
<header>
<nav class="header__nav nav">
<ul class="nav__items">
<li class="nav__item"><a href="#">A</a></li>
<li class="nav__item"><a href="#">B</a></li>
<li class="nav__item"><a href="#">C</a></li>
<li class="nav__item"><a href="#">D</a></li>
<li class="nav__item"><a href="#">E</a></li>
</ul>
</nav>
</header>
これで行きましょう。
jQueryで検出、そしてクラスの削除と追加
まずはコードから
$('.nav__item a').click(function() {
$('.nav__item a').removeClass( 'is-active' );
$(this).addClass( 'is-active' );
});
短いですね。
では1行ずつ見ていきましょう。
$('.nav__item a').click(function() {
この部分は、「nav__itemクラスの子要素のaタグ」がクリックされた時に処理を実行する。です。
$('.nav__item a').removeClass( 'is-active' );
ここと次の行が今回の要です。
全ての「nav__itemクラスの子要素のaタグ」のクラスから「is-active」を削除します。
そうです。削除です。
クリックされた時点ではクラスを追加せず、まず「全てのアクティブを消す」という処理を行うわけです。
なるほど！と思いました。
$(this).addClass( 'is-active' );
ここで、クリックされた「nav__itemクラスの子要素のaタグ」に対して、「is-active」クラスを追加します。
これでクリックされた要素だけが下線が引かれる状態になります。
jQueryの流れを確認すると
- クリックされる
- 全てのis-activeを一旦削除
- クリックされた要素にだけ、is-activeを付け直す
ですね。
最初この課題を見た時に、クリックされた時に別のすでに下線が引かれている箇所を
解除するんだろうと考えていました。
本当に「なるほど」です。面白い。
今日のまとめ
- 複数要素に対して削除、クリックされた要素に対してのみ追加という風に対象範囲を考え、2段構えにすることで「クリックされた要素にのみ下線を引く」をカンタンに実現できる。
今回の課題は条件次第でカンタンにできるというのを学ぶ良い機会でした。
こういう指定をサクッと考えられるようになりたいです。
では、また。
