URLとhrefが一緒のナビゲーションのaタグにis_activeを付けたい(2)

Question

数日前にした別の質問からの続きです。

【以前の質問】
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です。

var currentPath = location.pathname.split("/");
var targetHref = "/" + currentPath[currentPath.length - 3] + "/" + currentPath[currentPath.length - 2] + "/" + currentPath[currentPath.length - 1];
targetHref = targetHref.split("index.html")[0]; //一応
//↑ここは本番サイトに合わせてください。
// 想定する結果A： /sample/ccc/example1.html
// 想定する結果B： /sample/aaa/

navList = $(".side__navigation").find("a");
navList.each(function(){
  var myhref = $(this).attr("href");
  if( myhref === targetHref ) {
    $(this).addClass("is_active");    
  }
} );

<!-- 【理想のHTML1】 -->
<!-- 現在URLが/sample/ccc/example1.htmlの時 -->
<dl class="side__navigation">
  <dt>サンプル情報</dt>
  <dd>
    <nav role="navigation">
      <ul>
        <li><a href="/sample/aaa/">サンプル</a></li>
        <li><a href="/sample/bbb/">サンプル</a></li>
        <li><a href="/sample/ccc/">サンプル</a>
          <ul>
            <li><a href="/sample/ccc/example1.html" class="is_active">開いているページ</a></li>
            <li><a href="/sample/ccc/example2.html">サンプル</a></li>
            <li><a href="/sample/ccc/example3.html">サンプル</a></li>
          </ul>
        </li>
        <li><a href="/sample/ddd/">サンプル</a></li>
      </ul>
    </nav>
  </dd>
</dl>

<!-- 【理想のHTML2】 -->
<!-- 現在URLが/sample/ccc/の時 -->
<dl class="side__navigation">
  <dt>サンプル情報</dt>
  <dd>
    <nav role="navigation">
      <ul>
        <li><a href="/sample/aaa/">サンプル</a></li>
        <li><a href="/sample/bbb/">サンプル</a></li>
        <li><a href="/sample/ccc/" class="is_active">開いているページ</a>
          <ul>
            <li><a href="/sample/ccc/example1.html">サンプル</a></li>
            <li><a href="/sample/ccc/example2.html">サンプル</a></li>
            <li><a href="/sample/ccc/example3.html">サンプル</a></li>
          </ul>
        </li>
        <li><a href="/sample/ddd/">サンプル</a></li>
      </ul>
    </nav>
  </dd>
</dl>

<!-- 【理想のHTML3】 -->
<!-- 現在URLが/sample/bbb/の時 -->
<dl class="side__navigation">
  <dt>サンプル情報</dt>
  <dd>
    <nav role="navigation">
      <ul>
        <li><a href="/sample/aaa/">サンプル</a></li>
        <li><a href="/sample/bbb/" class="is_active">開いているページ</a></li>
        <li><a href="/sample/ccc/">サンプル</a>li>
        <li><a href="/sample/ddd/">サンプル</a></li>
      </ul>
    </nav>
  </dd>
</dl>

<!-- 【理想のHTML4】 -->
<!-- 現在URLが/sample/example4.htmlの時 -->
<dl class="side__navigation">
  <dt>サンプル情報</dt>
  <dd>
    <nav role="navigation">
      <ul>
        <li><a href="/sample/">サンプル</a></li>
        <li><a href="/sample/example4.html" class="is_active">開いているページ</a></li>
        <li><a href="/sample/example5.html">サンプル</a>li>
        <li><a href="/sample/ddd/">サンプル</a></li>
      </ul>
    </nav>
  </dd>
</dl>

Comments

[kei344]

JavaScriptが書かれていません。また、「メニューをクリックしたら（中略）付けたい」と書かれていますが、a要素をクリックしたらリンク先に移動します。そのあたりはどういう挙動を想定するかなど、具体的にお書きください。

Answer 1

これでどうでしょうか。

$(function(){
	$(".side__navigation a").each(function(){
		if(this.href == location.href) $(this).addClass("is_active");
	});
});

以前の質問を拝見しましたが、$(this).attr("href") を使っていますね。
今回は this.href を使いました。

• $(this).attr("href") は、href属性の文字列をそのまま取得します。
• $(this).prop("href")（あるいは単純に this.href） は実際にリンクする先のフルのURLを取得できます。

<a id="link" href="hoge.html">リンク</a>
<script>
console.log($("#link").attr("href")); // hoge.html
console.log($("#link").prop("href")); // http://○○○.○○○/○○○/hoge.html
</script>

ですので、this.href を利用すれば location.href との単純比較で現在URLと一致しているかどうか確認することが出来ます。

Comments

[kei344]

細かい話ですが $( this ).prop( 'href' ) とすれば jQuery でも採れますよ。

[kura]

ありがとうございます。加筆致しました。

Answer 2

超ダサダサでリファクタリングしていませんがなんとなくこんな感じですか？

var activeUrls = location.pathname.split("/");
    if(activeUrls[activeUrls.length - 1].length == 0 ){
      activeUrls.pop();
    }
    navList = $(".side__navigation").find("a");
    isFllag = false;
    navList.each(parse);
function parse(){
  var hrefs = $(this).attr("href").split("/");
  if(hrefs[hrefs.length - 1].length == 0){
    hrefs.pop();
  }
  if( isActive(hrefs,activeUrls) ) {
    $(this).addClass("is_active");
  }
}

var isFllag = false;
function isActive(urlElementsA,urlElementsB){
  if(urlElementsA[urlElementsA.length - 1] === urlElementsB[urlElementsB.length -1]){
    return true;
  }
  if(!isFllag)return false;
  if(urlElementsA[urlElementsA.length - 1].endsWith("html")){
    urlElementsA.pop();
    isFllag = true;
    return isActive(urlElementsA,urlElementsB);
  }
    return false;
}

isFlagは... 普通に消せるとは思いますがｗ