javascript - 如何在分页上保持当前页面菜单突出显示？

Question

我在一个页面中有一个导航菜单，它通过添加一个类来根据 URL 突出显示您所在的当前菜单。

我的问题是我的页面是分页的，所以有时用户最终会到达：

http://example.com:4001/wordpress/calientes/page/2/, /page/3/ , /page/4/ 等等...

在用户浏览页面时保持菜单突出显示的最佳方法是什么？

这是我的菜单：

<div class="innerhead">

<ul>

<li> <a href="http://example.com:4001/wordpress/calientes/">Calientes </a> </li>
<li><a href="http://example.com:4001/wordpress/tendencias/">Tendencias</a></li>

</ul>

</div>

这是我用来突出显示当前页面菜单的脚本：

<script>
$(function(){
    // this will get the full URL at the address bar
    var url = window.location.href; 

    // passes on every "a" tag 
    $(".innerhead a").each(function() {
            // checks if its the same on the address bar
        if(url == (this.href)) { 
            $(this).closest("li").addClass("active");
        }
    });
});
</script>

Answer 1

另一种选择可能是：

<div class="innerhead">
  <ul>
    <li id="calientes"> <a href="http://example.com:4001/wordpress/calientes/">Calientes </a> </li>
    <li id="tendencias"> <a href="http://example.com:4001/wordpress/tendencias/">Tendencias</a></li>
  </ul>
</div>

在您的脚本中：

var url = window.location.pathname.split('/');
$('#'+url[4]).addClass("active");