HP素材のおすそわけ。blog > 静的HTMLでも、jQueryとJavaScriptを使って現在のページを強調表示する。

静的HTMLでも、jQueryとJavaScriptを使って現在のページを強調表示する。

2014年3月11日(火)11:28 PM

ブログランキング・にほんブログ村へ 静的HTMLでも、jQueryとJavaScriptを使って現在のページを強調表示する。をはてなブックマークに追加

写真素材配布サイトを運営しておりまして、思うところがあって静的HTMLで運営してます。CMSを使いたいんですが、私はプログラムに関しては素人で、WordPressを使うのが精一杯だし…いざサーバーに何かあった時、オフラインにデータが全てあれば復旧は簡単なので、扱いやすい静的サイトにしてるんです。

といっても、ヘッダやフッダなどの共通パーツは切り分けてPHPで読み込むなど、ある程度管理が楽な状態にしてます。

で、ナビゲーションもPHPで埋め込んでたんですが、これだと現行のページも全部リンクが貼られた状態になるんですよね。

イメージ

↑ みたいな感じです。現在見ているページがどれなのか、ひと目ではわかりません。ちょっと不親切だな、と思ってたんですよ。

なにかいい方法がないかと思ってグーグル先生に「現在のページ JavaScript クラス」でお聞きしたら、解決方法はすぐ見つかりました。かちびと.netさんの「jQueryでグローバルメニュー内のリストから「現在のページ」のURLを持ったリストにclassを加える」の記事がドンピシャでした。

イメージ

jQueryを使ったJavaScriptです。私の場合、以下の状態でうまくいきました。

HTML

<p class="page_navi">
[ <a href="http://kanari.info/photo/flower/cherry-blossom/1/">1</a> ]
(略)
[ <a href="http://kanari.info/photo/flower/cherry-blossom/10/">10</a> ]
<span class="new">&nbsp;&lt;&nbsp;up:03/11</span></p>

JavaScript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">var url = window.location;
   $('.page_navi a[href="'+url+'"]').addClass('current');</script>

CSS

.current{font-weight:900;color:#000;text-decoration:none;font-size:110%}

実際のページは、こちらになります。ちゃんとカレントページのナビ部分は強調されています。

参考ブログ

この記事をTwitterやSNSなどのソーシャルメディアで共有して下さい。

コメントはお気軽によろしくお願い申し上げます。

この記事へのリンクタグ

<a href="http://kanari.info/b/4267">静的HTMLでも、jQueryとJavaScriptを使って現在のページを強調表示する。 HP素材のおすそわけ。blog</a>

Trackback URL


素材

外部リンク

▲TOPへ