[JS]見てるページのメニュースタイルを変更する-HighlightNavigation-

17年前

特にタブっぽいつくりをしてるメニューなんかだと、表示してるページのナビゲーションメニューを別のスタイルにしたいという場合がある。
開いてるページのボタンにだけclass=”current”とかつければ出来るんだけど、メニューをテンプレートやライブラリにしちゃうと手書きでは無理。

そういう状況がまさに今日あったので勉強がてら作ってみた。

»サンプル

使いたいページがbodyにidつけてて、メニューにはidやclassが一切付いてない構造だったので、
こちらを参考にページのURLとメニューのURLが一致したらクラス名つけるというものにした。

bodyのidとaのhref、URLとliかaのidやclass、という一致条件でも出来るので、swithでモード選択できるようにしてもいいかもしれない。

<div id="menu">
<ul>
<li><a href="index.html">Menu1</a></li>
<li><a href="menu2.html">Menu2</a></li>
<li><a href="menu3.html">Menu3</a></li>
</ul>
</div>

表示してるページのメニューがこうなる▼

<li  class="stay"><a href="menu3.html" class="stay">Menu3</a></li>

window.onload = function() {

if (document.getElementsByTagName) {
var myMenu = document.getElementById(“menu”).getElementsByTagName(“a”);
var myHref = document.location.href;
var myUrl = FilePass(myHref);
var HrefList = new Array();

for (var i = 0; i »動作サンプル
»JSファイル

シェア