添加基于子页面 URL 的活动导航类

Question

我有一个基于帖子主题动态生成的基本侧边菜单结构。使用code below，我可以在查看单个主题页面时按预期单独突出显示活动链接。然而，在列出所有主题的主页面或索引页面上，侧导航中的每个锚元素都被赋予一个“活动”类。如何防止索引页面 sidenav 锚接收“活动”类，同时在各个主题页面上保留“活动”类？

提前感谢任何可以提供一些见解的人...

侧导航结构：

<div class="sidenav">
  <ul>
    <li><a href="//example.com/customer/topic/government">Government</a></li>
    <li><a href="//example.com/customer/topic/hospitality">Hospitality</a></li>
    <li><a href="//example.com/customer/topic/industrial">Industrial</a></li>
  </ul>
</div>

Javascript：

$(function(){
    var current = location.pathname;
    $('.sidenav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

在个别主题页面上使用上述JS的当前输出：

<div class="sidenav">
  <ul>
    <li><a href="//example.com/customer/topic/government">Government</a></li>
    <li><a href="//example.com/customer/topic/hospitality" class="active">Hospitality</a></li>
    <li><a href="//example.com/customer/topic/industrial">Industrial</a></li>
  </ul>
</div>

在主题索引页面（/customer）上使用上述 JS 的当前输出

<div class="sidenav">
  <ul>
    <li><a href="//example.com/customer/topic/government" class="active">Government</a></li>
    <li><a href="//example.com/customer/topic/hospitality" class="active">Hospitality</a></li>
    <li><a href="//example.com/customer/topic/industrial" class="active">Industrial</a></li>
  </ul>
</div>

Answer 1

试试这个添加了当前的最后一个键可能是一个协议问题，这样你就可以始终确定

$(function(){
    var current = location.pathname;
    current = current.substring(current.lastIndexOf('/'));
    $('.sidenav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    });
});