如何将当前页面菜单高亮显示在分页上？

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");