数日前にした別の質問からの続きです。
【以前の質問】
https://teratail.com/questions/62574
少し言葉足らずで整理しきれなかったので、再質問です。
現在開いているページのパスが書かれたメニュー(aタグ)にis_activeを付けたいと思っています。
全て静的(CMS等動的ではない)でアコーディオンのようなアクションも付ける予定はありません。
メニューをクリックしたら該当のページに遷移する予定です。
ディレクトリの構成は下記のとおりです。
/sample1/
/sample1/example1.html(←ココを開くとうめく動作しない)
/sample1/aaa/
/sample1/aaa/example2.html
/sample1/aaa/bbb/
/sample1/aaa/bbb/example3.html
(各フォルダのインデックスページはindex.html)
以前の質問で理想のHTML1~3は、開いているページのメニューにis_activeを付けることができましたが、上記の場所を開いた時にis_activeが付いてくれませんでした。
下記は、前回のベストアンサーの回答者様が教えてくれたJSです。
javascript
1var currentPath = location.pathname.split("/"); 2var targetHref = "/" + currentPath[currentPath.length - 3] + "/" + currentPath[currentPath.length - 2] + "/" + currentPath[currentPath.length - 1]; 3targetHref = targetHref.split("index.html")[0]; //一応 4//↑ここは本番サイトに合わせてください。 5// 想定する結果A: /sample/ccc/example1.html 6// 想定する結果B: /sample/aaa/ 7 8navList = $(".side__navigation").find("a"); 9navList.each(function(){ 10 var myhref = $(this).attr("href"); 11 if( myhref === targetHref ) { 12 $(this).addClass("is_active"); 13 } 14} );
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>
HTML
1<!-- 【理想のHTML4】 --> 2<!-- 現在URLが/sample/example4.htmlの時 --> 3<dl class="side__navigation"> 4 <dt>サンプル情報</dt> 5 <dd> 6 <nav role="navigation"> 7 <ul> 8 <li><a href="/sample/">サンプル</a></li> 9 <li><a href="/sample/example4.html" class="is_active">開いているページ</a></li> 10 <li><a href="/sample/example5.html">サンプル</a>li> 11 <li><a href="/sample/ddd/">サンプル</a></li> 12 </ul> 13 </nav> 14 </dd> 15</dl>
回答2件
あなたの回答
tips
プレビュー