ヘッダーメニューなどで、現在のページのみ色を変更したい!といった悩みにお答えします。
この記事ではjQuery、JavaScript(Vanilla JS)両方を掲載しています。
目次
カレント表示のコード
HTML
HTMLはこのような構造です。
<ul class="header__nav">
<li class="header-nav__item">
<a href="index.html">ホーム</a>
</li>
<li class="header-nav__item">
<a href="page2.html">ページ2</a>
</li>
<li class="header-nav__item">
<a href="page3.html">ページ3</a>
</li>
</ul>
jQuery / JavaScript(Vanilla JS)
jQuery
まずはjQueryから。
// カレント表示
href = location.href;
var links = jQuery(".header-nav__item > a");
links.each(function (index, value) {
if (value.href == href) {
jQuery(".header-nav__item").eq(index).addClass("current");
});
現在のページのURLと、ナビのリンク(.header-nav__item > a
)をすべて取得します。
もし、取得したURLと現在のページが一致していれば、.header-nav__item
にcurrent
のクラス名を追加するというものです。
あとはCSSでcurrent
のデザインを調整すればOKです。
JavaScript(Vanilla JS)
JavaScript(Vanilla JS)の方も掲載しておきます。
// カレント表示
href = location.href;
var links = document.querySelectorAll(".header-nav__item > a");
for (var i = 0; i < links.length; i++) {
if (links[i].href == href) {
document.querySelectorAll(".header-nav__item")[i].classList.add("current");
}
}
まとめ:カレント表示の方法
以上、jQuery / JavaScript(Vanilla JS)でカレント表示する方法の解説でした。
他にも様々な方法がありますが、これが最も簡単なのではないでしょうか。
是非実装してみてください。
あわせて読みたい


【JavaScript】ページトップボタンの美しいスムーススクロール
JavaScript(Vanilla JS)を使ってページトップ戻るボタンの美しいスムーススクロールを実現します。 脱jQueryの第一歩としても良いのではないでしょうか。 【ページト…
あと少しのカスタマイズでお困りではないですか?
スキルを身につけるなら、デイトラがおすすめです。

私はWeb制作とWebデザインを受講しました!
業界最安値で、学習内容もサポートも充実!
気になるコースがあれば是非覗いてみてください。
コメント