2018年3月27日
高卒の私が28歳から未経験でWEBデザイナーになった体験談
【jQuery】現在のページのナビにクラス付与
グローバルナビに、現在のページの箇所だけ、デザインを変更したいってこと、多々ありますよね？
WordPressだと、if文の条件分岐で、is_pageを使えば、固定ページのスラッグから、クラスを付与することが出来ますが、今回はWordPressでの実装ではなかったので、少し手間取りました。
ってことで備忘録です。
HTMLはこんな感じ
<nav> <ul> <li class="navi_01"><a href="http://kyo-kara.xyz/">TOP</a></li> <li class="navi_02"><a href="/about">サイトについて</a></li> <li class="navi_03"><a href="/work">事業内容</a></li> <li class="navi_04"><a href="/access">アクセス</a></li> <li class="navi_05"><a href="/company">会社概要</a></li> </ul> </nav>
li要素にクラスnavi_01～navi05を持たせておきます。もちろん任意のクラス名でOK。
現在のページのURLでクラスを付与
まずは、URL名です。
これは、トップページにいるときにHOMEやTOPといった箇所だけデザインを変えたい場合ですね。
もちろん、JQueryを読みこみしている前提です。
<!--現在のページにクラス付与-->
<script>
$(window).bind("load", function(){
var url = location.href;// 現在いるページののURLを取得
// 現在ページが http://kyo-kara.xyz/の時は.navi_01を持つliにcurrentを付与
if(url == "http://kyo-kara/xyz/"){
$('li.navi_01').addClass('current');
}
});
</script>
現在のページのURLに含まれている名前でクラスを付与
下層ページの場合です。
<!--現在のページにクラス付与-->
<script>
$(window).bind("load", function(){
var url = location.href;// 現在いるページののURLを取得
// URLにaboutが含まれていた時は.navi_02を持つliにcurrentを付与
if(document.URL.match("/about")) {
$('li.navi_02').addClass('current');
}
});
</script>
最終的にこんな感じ
トップも他の下層ページもデザインを変えるなら、こんな感じでしょうか。
<!--現在のページにクラス付与-->
<script>
$(window).bind("load", function(){
var url = location.href;// 現在いるページののURLを取得
// 現在ページが http://kyo-kara.xyz/の時は.navi_01を持つliにcurrentを付与
if(url == "http://kyo-kara/xyz/"){
$('li.navi_01').addClass('current');
}
// URLにaboutが含まれていた時は.navi_02を持つliにcurrentを付与（以下省略）
if(document.URL.match("/about")) {
$('li.navi_02').addClass('current');
}
if(document.URL.match("/work")) {
$('li.navi_03').addClass('current');
}
if(document.URL.match("/access")) {
$('li.navi_04').addClass('current');
}
if(document.URL.match("/company")) {
$('li.navi_05').addClass('current');
}
});
</script>
意外と簡単に実装できますが、結構工数取られちゃいました(>_<) これは、今後も間違いなく使うので、忘れないようにしとかないと。 ではでは。
Recommend
