Webの画面遷移時に、現在開いている画面に相当するメニューボタンの色だけ切り替えたいです。
現実装は以下のようになっています。
HTML
1<nav class="menu-nav"> 2 <ul> 3 <li class="nav-item active"><a href="aaa.php">AAA</a></li> 4 <li class="nav-item "><a href="bbb.php">BBB</a></li> 5 <li class="nav-item "><a href="ccc.php">CCC</a></li> 6 <li class="nav-item"><a href="ddd.php">DDD</a></li> 7 <script type="text/javascript">footer();</script> 8 </ul> 9</nav>
CSS
1.menu-nav .nav-item.active a, 2.menu-nav .nav-item a:hover { 3 background-color:#ffffff; 4 color:#000; 5}
上の例はaaa.phpです。
bbb.phpだと以下のようになります。
HTML
1<li class="nav-item active"><a href="bbb.php">BBB</a></li>
元々ヘッダ部分は各ファイルにコーディングしていたのですが、ヘッダ部分を共通化して各ファイルからheader.phpを読み込む形にしようとした時に、activeをどう切り替えれば良いかわかりませんでした。
Javascriptでパスを取得して、パスを元にどれにactiveを付与するか判別しようと試みたのですが、それもうまくいきませんでした。
Javascript
1var $dir = location.href.split("/"); 2var $dir2 = $dir[$dir.length -1];
どなたか良い解決策をご教授いただけないでしょうか?
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー