Question

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

我的问题是我的网页是分页的，所以有时用户最终会在：

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

如何在分页时突出显示当前页面菜单？

1 个答案: