[JS]ナビゲーションの現在位置の表示を自動で変更するスクリプト
Post on:2009年5月1日
sponsors
ナビゲーションの現在位置を取得し、要素にクラス（activeなど）を追加してデザインを変更するスクリプトをCSS newbieから紹介します。
Using JavaScript to Style Active Navigation Elements
スクリプトは単独で動作するものも紹介されていますが、ここではより簡略化されたjQuery版を紹介します。
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> $(document).ready(function() { if(location.pathname != "/") { $('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); } else $('#nav a:eq(0)').addClass('active'); }); </textarea> |
仕組みは、「ナビゲーション内のa要素のhrefの値」と「表示ページのURL」が一致していれば、その要素に「class="active"」を追加するというものです。
※トップ（href="/"）の記述にも対応しています。
sponsors
