[JS]ナビゲーションの現在位置の表示を自動で変更するスクリプト

ナビゲーションの現在位置を取得し、要素にクラス(activeなど)を追加してデザインを変更するスクリプトをCSS newbieから紹介します。

デモのキャプチャ

Using JavaScript to Style Active Navigation Elements

スクリプトは単独で動作するものも紹介されていますが、ここではより簡略化されたjQuery版を紹介します。

仕組みは、「ナビゲーション内のa要素のhrefの値」と「表示ページのURL」が一致していれば、その要素に「class="active"」を追加するというものです。
※トップ(href="/")の記述にも対応しています。

sponsors

top of page

©2018 coliss