0

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

菜单很简单：

<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');
        }
    });
});

任何解决方案？

4

1 回答 1

1

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

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

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

您的导航 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');
    }
});
于 2013-05-22T23:18:46.013 回答