[Tips]表示されているメニューにActiveクラスを自動的に付与する方法

例えば下記のような構造のHTMLがあったとして、menu-a.htmlを現在開いているとしたら自動で.activeを追加する。

<ul class="nav nav-pills nav-fill">
    <li class="nav-item"><a class="nav-link" href="./menu-a.html">MenuA</a></li>
    <li class="nav-item"><a class="nav-link" href="./menu-b.html">MenuB</a></li>
    <li class="nav-item"><a class="nav-link" href="./menu-c.html">MenuC</a></li>
</ul>

  document.addEventListener('DOMContentLoaded', function() {
    var filename = location.href.match(".+/(.+?)\.[a-z]+([\?#;].*)?$")[1];
    $('a[href*="' + filename + '"]').addClass('active');
  });

参考

• URLからファイル名を取得する正規表現