Javascriptにて現在のページに対応したメニューの背景色を変えたい
Q&A
Closed
フレームワークLaravel使用
以下 .blade.php
<nav class = "menu">
<ul class = "menu-item">
<li id="menu-top" class="menu-item-01">
<a class="header-list-items" href="{{route(topページへのURL)}}">
トップ</a></li>
<li id="menu-detail01" class="menu-item-02">
<a class="header-list-items" href="{{route(詳細ページ01へのURL)}}">
詳細ページ01</a></li>
<li id="menu-detail02" class="menu-item-03">
<a class="header-list-items" href="{{route(詳細ページ02へのURL)}}">
詳細ページ02</a></li>
<li id="menu-detail03" class="menu-item-04">
<a class="header-list-items" href="{{route(詳細ページ03へのURL)}}">
詳細ページ03</a></li>
</ul>
</nav>
topページ、詳細01、詳細02、詳細03の4つのメニューリストが配置されており、
通常時の背景色はグレーですが、現在のページと一致する場合
menu-activeというクラスを、各li要素のclassへ追加して、
背景色を変更しようと、下記jsを作成しましたが、
Uncaught TypeError: $menuDetail01 .classList.addClass is not a function
というエラーが出てしまっております。
//ページ更新で下記function実行開始
$(function() {
const $nowUrl = location.href;
const $menuTop = document.getElementById("menu-top");
const $menuDetail01 = document.getElementById("menu-detail01");
const $menuDetail02 = document.getElementById("menu-detail02");
const $menuDetail03 = document.getElementById("menu-detail03");
//menu-activeというクラスで背景色を上書きするようbackgroundcolorを記述。includes（）内の文字は各URLで含んでいるものです。
if($nowUrl.includes("detail01")) {
$menuDetail01.classList.addClass( "menu-active" );
}
else if($nowUrl.includes("detail02")) {
$menuDetail02.classList.addClass( "menu-active" );
}
else if($nowUrl.includes("detail03")) {
$menuDetail03.classList.addClass( "menu-active" );
} else {
$menuTop.classList.addClass( "menu-active" );
}
});
エラーもそうですが、そもそもこのやり方で実現しようとしている方法が正しいのかどうかも
アドバイスを頂けるとありがたいです。
宜しくお願い致します。
0 likes
