いつもお世話になっています。
小メニューのあるメニューをクリックしたらURLとhrefが一緒のaタグにis_activeを付けたいのですが、下記に書いたJSだと、小メニューに全てis_activeが付いてしまってます。
書いたJSは1階層目はいいんですが、小メニューになるとうまくできません。
JSコードの下記に理想のHTMLを用意いたしました。
ちゃんと今開いているページのみis_activeが付くようにできないでしょうか。。
よろしくお願いします!
html
1<!-- 【こうなっちゃうHTML】 --> 2<!-- /sample/ccc/example1.htmlを開いている時 --> 3<dl class="side__navigation"> 4 <dt>サンプル情報</dt> 5 <dd> 6 <nav role="navigation"> 7 <ul> 8 <li><a href="/sample/aaa/">サンプル</a></li> 9 <li><a href="/sample/bbb/">サンプル</a></li> 10 <li><a href="/sample/ccc/" class="is_active">サンプル</a> 11 <ul> 12 <li><a href="/sample/ccc/example1.html" class="is_active">開いているページ</a></li> 13 <li><a href="/sample/ccc/example2.html" class="is_active">サンプル</a></li> 14 <li><a href="/sample/ccc/example3.html" class="is_active">サンプル</a></li> 15 </ul> 16 </li> 17 <li><a href="/sample/ddd/">サンプル</a></li> 18 </ul> 19 </nav> 20 </dd> 21</dl>
javascript
1var activeUrl = location.pathname.split("/")[2]; 2 navList = $(".side__navigation ").find("a"); 3navList.each(function(){ 4 if( $(this).attr("href").split("/")[2] == activeUrl ) { 5 $(this).addClass("is_active"); 6 } 7});
ここからこうなってほしいというHTMLを記載させていただきます。
html
1<!-- 【理想のHTML1】 --> 2<!-- 現在URLが/sample/ccc/example1.htmlの時 --> 3<dl class="side__navigation"> 4 <dt>サンプル情報</dt> 5 <dd> 6 <nav role="navigation"> 7 <ul> 8 <li><a href="/sample/aaa/">サンプル</a></li> 9 <li><a href="/sample/bbb/">サンプル</a></li> 10 <li><a href="/sample/ccc/">サンプル</a> 11 <ul> 12 <li><a href="/sample/ccc/example1.html" class="is_active">開いているページ</a></li> 13 <li><a href="/sample/ccc/example2.html">サンプル</a></li> 14 <li><a href="/sample/ccc/example3.html">サンプル</a></li> 15 </ul> 16 </li> 17 <li><a href="/sample/ddd/">サンプル</a></li> 18 </ul> 19 </nav> 20 </dd> 21</dl>
html
1<!-- 【理想のHTML2】 --> 2<!-- 現在URLが/sample/ccc/の時 --> 3<dl class="side__navigation"> 4 <dt>サンプル情報</dt> 5 <dd> 6 <nav role="navigation"> 7 <ul> 8 <li><a href="/sample/aaa/">サンプル</a></li> 9 <li><a href="/sample/bbb/">サンプル</a></li> 10 <li><a href="/sample/ccc/" class="is_active">開いているページ</a> 11 <ul> 12 <li><a href="/sample/ccc/example1.html">サンプル</a></li> 13 <li><a href="/sample/ccc/example2.html">サンプル</a></li> 14 <li><a href="/sample/ccc/example3.html">サンプル</a></li> 15 </ul> 16 </li> 17 <li><a href="/sample/ddd/">サンプル</a></li> 18 </ul> 19 </nav> 20 </dd> 21</dl>
html
1<!-- 【理想のHTML3】 --> 2<!-- 現在URLが/sample/bbb/の時 --> 3<dl class="side__navigation"> 4 <dt>サンプル情報</dt> 5 <dd> 6 <nav role="navigation"> 7 <ul> 8 <li><a href="/sample/aaa/">サンプル</a></li> 9 <li><a href="/sample/bbb/" class="is_active">開いているページ</a></li> 10 <li><a href="/sample/ccc/">サンプル</a>li> 11 <li><a href="/sample/ddd/">サンプル</a></li> 12 </ul> 13 </nav> 14 </dd> 15</dl>
回答3件
あなたの回答
tips
プレビュー