showCurrentPage.js

現在開いているページのアドレスと、ローカルナビゲーションのリンクのhref属性を、取得＆比較して、現在開いているページのナビゲーションにクラス "thisChild" を付与します。それによってHTMLを変更せずに、カレントページ表現（リンクの強調表示等）を行い、スムーズな制作＋運用環境、ユーザビリティを提供します。

※個人利用/商用利用問わず連絡もリンクも特に要りません。自由に持っていって、自由に改変してください。どこかで紹介して頂けると嬉しいです。

2008/11/10 - バージョンアップしました。
処理方法を改善し制約を取り払うことに成功しました。

ルートパス版 (root path version)

ローカルナビゲーションがルートパスの場合は、次のJSと使用方法を参照ください。

Download

1. ローカルナビゲーションの設置

※id="localNavigation"を付与します。

<ul id="localNavigation">
<li><a href="/lab/showCurrentPage/root/sample/">会社理念</a></li>
<li><a href="/lab/showCurrentPage/root/sample/outline.html">会社概要</a></li>
<li><a href="/lab/showCurrentPage/root/sample/history.html">会社沿革</a></li>
</ul>

2. ディレクトリ名設定、スクリプト読み込み

<script type="text/javascript" src="showCurrentPage.js"></script>

相対パス版 (relative path version)

ローカルナビゲーションが相対パスの場合は、次のJSと使用方法を参照ください。
※現在開いているページのアドレスが「スラッシュ止めアドレス」であれば、index.****のリンクにclass="thisChild"を付与します。

Download

1. ローカルナビゲーションの設置

※id="localNavigation"を付与します。

<ul id="localNavigation">
<li><a href="index.html">会社理念</a></li>
<li><a href="outline.html">会社概要</a></li>
<li><a href="history.html">会社沿革</a></li>
</ul>

2. ディレクトリ名設定、スクリプト読み込み

<script type="text/javascript" src="showCurrentPageRel.js"></script>

3. カテゴリートップのリンクにもステイ表示を付与したい場合

リンク href="index.html" のある li に class="thisChild" を付加します。

<script type="text/javascript">var parentMatch = true;</script>
<script type="text/javascript" src="showCurrentPageRel.js"></script>

Howto Customize

Coming soon..

back to home