前提
ナビは共通化していて個別にclaas属性を追加することができないので、
JavaScript(jQuery)とCSSを使用してデザインを変更したいと思っています。
表示中ページのURLを取得して一致したaタグにclass="active"を追加したいです。
参考サイト:https://hsmt-web.com/blog/nav-current/#p1-2-1
該当のソースコード
html
1<div class="nav"> 2 <ul> 3 <li><a href="2022.html">2022</a></li> 4 <li><a href="2021.html">2021</a></li> 5 <li><a href="2020.html">2020</a></li> 6 </ul> 7 </div> 8</div>
css
1.nav ul li a { 2 padding: 15px; 3 display: inline-block; 4} 5.nav ul li a.active { 6 color: #fff; 7 background: #000; 8}
JavaScript(jQuery)
1$(function(){ 2 href = location.href; 3 var links = jQuery(".nav > li > a"); 4 5 links.each(function (index, value) { 6 if (value.href == href) { 7 jQuery(".nav").children("li").eq(index).addClass("active"); 8 } 9 }); 10});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/10/05 02:47
2022/10/05 02:50
2022/10/05 04:09 編集
2022/10/05 04:21
2022/10/05 04:34