グローバルメニューなど、現在表示しているページのリンクにスタイルシートのクラスを追加し、
現在開いているページであることを分かりやすくしたいことは多いと思います。
今回は、テンプレートなどでグローバルメニューが共通の場合に、jQueryで現在のメニューにクラス「on」を付ける方法をメモしておきます。
$(function(){ var url = window.location; $('#mainNav a[href="'+url+'"]').addClass('on'); });
現在のページが「サービス(http://xxxxxxxxx/service/)」の場合、以下のようなソースになります。
<nav id="mainNav"> <ul id="gNav"> <li class="gNav01"><a href="http://xxxxxxxxx/about/">会社概要</a></li> <li class="gNav02"><a href="http://xxxxxxxxx/service/" class="on">サービス</a></li> <li class="gNav03"><a href="http://xxxxxxxxx/contact/">お問い合わせ</a></li> </ul> </nav>
コメント