添加主动导航 Class 基于 Url 类似 url

Question

我正在尝试在导航中添加活动 class。我用了这篇文章。 Add Active Navigation Class Based on URL

$(function(){
    var current = location.pathname;
    $('#nav 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');
        }
    })
})

效果很好。但我的问题是在这种情况下。

/blog, /blogAds

如果 url /blog, 处于活动状态 class 添加到两个导航项。有什么解决办法吗？

Answer 1

试试这个

if( new RegExp(location.pathname + "$").test( $this.attr('href') ) ) {
    $this.addClass('active');
}

测试：

new RegExp('\/blog$').test('/blogAds'); // returns false
new RegExp('\/blog$').test('/blog'); // returns true

Reference

添加主动导航 Class 基于 Url 类似 url

Add Active Navigation Class Based On Url for similar url

javascript

navigation

jquery

laravel

bootstrap-4