使用esc_url将'Active'类应用于当前页面菜单项

Question

我正在尝试将“活动”类应用于当前页面的相应菜单项。 我以前从未遇到过这个问题/已经花了数小时阅读类似的问题而徒劳无功，并且我认为这与将Wordpress的esc_url用于我的菜单链接有关，但我不知道为什么这不起作用...我的jQuery似乎无法匹配网址。 当我在Page1上时，我想将active类应用于相应的li等，依此类推。 这是一个多页的网站。 有任何想法吗？ 我正在使用FoundationPress，这是Foundation的Wordpress样板。

<div class="top-bar" id="main-menu">
  <div class="mobile-bar mobile">
    <ul class="menu vertical dropdown text-center" data-dropdown-menu>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">Home</a></li>
      <li><a href="<?php echo esc_url( home_url( '/Page1' ) ); ?>">Page 1</a></li>
      <li><a href="<?php echo esc_url( home_url( '/Page2' ) ); ?>">Page 2</a></li>
      <li><a href="<?php echo esc_url( home_url( '/Page3' ) ); ?>">Page 3</a></li>
      <li><a href="<?php echo esc_url( home_url( '/Page4' ) ); ?>">Page 4</a></li>
    </ul>
  </div>
</div>

<style>
.menu > li {
display: inline-block;
padding:0 1em;
}
</style>

<script>
$(document).foundation();

var href = location.href;
 var pgurl = href.substr(href.lastIndexOf('/') + 1);
   // match all the anchors on the page with the html file name
   $('.menu a[href="' + pgurl + '"]').addClass('active');
</script>

Answer 1

最终，可以使用以下代码找到答案：

var url = window.location.pathname,
    urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
    // now grab every link from the navigation
    $('.menu a').each(function(){
        // and test its normalized href against the url pathname regexp
        if(urlRegExp.test(this.href.replace(/\/$/,''))){
            $(this).addClass('active');
        }
});

链接到解决此问题的原始海报-请支持他！ 链接