自动突出显示当前网址（即使在/ page / x上）

Question

我正在尝试自动向菜单中的URL添加“当前”类，并且已经成功使用了此代码。

$(document).ready(function() {
$('a').each(function() {
    if ($(this).prop('href') == window.location.href) {
        $(this).addClass('current');
    }
});
});

我想让它在分页上工作，因此，如果/ page / x出现在a href的URL后面，则会添加当前内容。 当前，它仅突出显示URL是否完全相同。

我已经做了一些搜索，但是似乎看不到该怎么做。

我非常感谢一些指导。 先感谢您。

Answer 1

//Give all your links that don't point to home some class...    

$(document).ready(function() {
        $('a.someClass').each(function() {
            if (window.location.href.indexOf($(this).prop('href')) != -1) {
                $('a.someClass').removeClass('current');
                $(this).addClass('current');
            }
        });
    });

    // A much simpler way to do the same will be
    var $a = $("a.someClass");
    $a.click(function() {
        if (window.location.href.indexOf($(this).prop('href')) != -1) {
            $a.removeClass('current');
            $(this).addClass('current');
        }
    });

    // If it still doesn't help,
    // just try to make a codepen/jsbin of your code along with html...

Answer 2

我试着用纯JavaScript做事，但您可以使用jQuery简化它。 （我懒于包含它）

var links = document.getElementsByTagName("a");
for(var i = 0;i< links.length; i++)
{       
    if(links[i].pathname == document.location.pathname)
    {
        links[i].classList.add("current");
    }
}

以前的版本包含多余的检查。