Question

如何让导航菜单自动检测附加活动类的位置以下结构...

<ul class="navigation-list">
    <li><a href="<?php echo $url; ?>">Home</a></li>
    <li><a href="<?php echo $url; ?>">How it works</a></li>
    <li><a href="<?php echo $url; ?>">Hire your...</a></li>
    <li><a href="<?php echo $url; ?>">Pricing</a></li>
    <li><a href="<?php echo $url; ?>">Themes</a></li>
    <li><a href="<?php echo $url; ?>">Features</a></li>
    <li><a href="<?php echo $url; ?>">Why us</a></li>
    <li><a href="<?php echo $url.'/blog/'; ?>">Blog</a></li>
</ul>

正如您所看到的，网站仍在建设中，我想要做的就是当您第一次访问该网站时，Home链接将获得一类活跃的类似...

<li><a href="<?php echo $url; ?>" class="active">Home</a></li>

然后当你点击...让我们说它是如何工作的，然后你将被接管到它的工作原理页面，导航将从主页中移除活动并将其附加到它如何工作......

<li><a href="<?php echo $url; ?>" class="active">How it works</a></li>

$ url参数/标记输出我的网址http://www.example.com 我已经尝试了这个但是它不起作用......

$(".navigation-list li a").each(function() 
{   
    if (this.href.search(location.href) != -1)
    {
        $(this).addClass("active");
    }
});

我现在尝试了以下内容并且有效......

$(function(){
    var url = window.location.pathname, 
    urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");

    $('.navigation-list li a').each(function(){
        if(urlRegExp.test(this.href.replace(/\/$/,''))){
            $(this).addClass('active');
        }
    });
});

虽然当我使用它时，当我在//mysite.org时，导航中的所有链接都变为活动状态，然后当我转到//mysite.org/blog/时，它只会激活博客导航项

如何在页面URL更改后向活动类添加活动类

0 个答案: