特にタブっぽいつくりをしてるメニューなんかだと、表示してるページのナビゲーションメニューを別のスタイルにしたいという場合がある。
開いてるページのボタンにだけclass=”current”とかつければ出来るんだけど、メニューをテンプレートやライブラリにしちゃうと手書きでは無理。
そういう状況がまさに今日あったので勉強がてら作ってみた。
使いたいページがbodyにidつけてて、メニューにはidやclassが一切付いてない構造だったので、
こちらを参考にページのURLとメニューのURLが一致したらクラス名つけるというものにした。
bodyのidとaのhref、URLとliかaのidやclass、という一致条件でも出来るので、swithでモード選択できるようにしてもいいかもしれない。
1 2 3 4 5 6 7 | <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> |
表示してるページのメニューがこうなる▼
1 | <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ファイル