Question

我想在相关页面打开时在项目菜单上添加“活动”类。

菜单很简单：

<ul id="main-menu">
<li class="blue">
<a href="http://localhost/maxinventions/">Home</a>
</li>
<li class="orange">
<a href="http://localhost/maxinventions/client">Clients</a>
</li>
<li class="puprle">
<a class="active" href="http://localhost/maxinventions/work">Work</a>
</li>
<li class="yellow">
<a href="http://localhost/maxinventions/about">About Us</a>
</li>
<li class="green">
<a href="http://localhost/maxinventions/contact">Contact Us</a>
</li>
</ul>

我已经能够在菜单中添加活动类，但问题是当我访问更深的url时脚本无法正常工作。例如，如果我访问http://my-site.com/work/web-architecture-and-development，活动课程就会消失。

这是我的脚本

$(function(){

var url = window.location.pathname, 
    urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); 
    $('#main-menu a').each(function(){
        // and test its normalized href against the url pathname regexp
        if(urlRegExp.test(this.href.replace(/\/$/,''))){
            $(this).addClass('active');
        }
    });
});

任何解决方案？

Answer 1

在我看来，你的正则表达式不匹配。用你的例子：

对于网址http://my-site.com/work/aaaa，您的window.location.pathname是“/ work / aaaa”。

这：urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");会产生/\/work\/aaaa$/，换句话说，以/ work / aaaa结尾的字符串。

您的nav href将是http://my-site.com/work。这与你的urlRegExp不符; href不以/ work / aaaa结尾。

我认为你想要的是以下几点：

var url = window.location.pathname,
    myDomain = 'http://my-site.com/';

$('#main-menu a').each(function(){
    if(url.indexOf(this.href.replace(myDomain,'')) > 0){
        $(this).addClass('active');
    }
});

将活动类添加到导航菜单失败，网址更深

1 个答案: