导航栏活动页面

Question

我有一个关于突出显示的导航栏菜单的问题，该菜单仅在我们单击它时才会突出显示。为此，我正在使用 javascript。但是，每个页面都有自己的子页面，例如页面Home有一个local/home的链接，但是它的内容会指向local/home/content。子链接不会使导航栏发挥作用导航栏被编码在不同的文件中，我只是在主页和其他页面中扩展。我不太擅长解释，但如果我可以详细说明任何部分，我会这样做。下面我附上了我的 JS 和我的导航栏：

导航栏：

        <ul class="navbar-nav mr-auto" id="nav">
            <li class="nav-item">
                <a class="nav-link active" href="{{ url('/') }}">Home
                    <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('courses') }}">opportunities</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('events') }}">events</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('uqalc') }}">courses</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('contact') }}">contact</a>
            </li>
        </ul>

Javascript：

const currloc = location.href;
        const menuItem = document.querySelectorAll('a');
        const menuLen = menuItem.length;
        for (let i = 0; i < menuLen; i++) {
            menuItem[i].classList.remove('active');
            if (menuItem[i].href === currloc) {
                menuItem[i].className = "nav-link active";
            }
        }

Answer 1

在这里，如果窗口位置是https://www.google.com/index.html，我将活动类添加到.navbar-nav 内的锚标记

然后这段代码在.navbar-nav中找到一个锚标签，如果锚标签href应该是index.html，那么这段代码将active类添加到锚标签

    function removeQueryString(url) {
        return url.split('?')[0]
    }
    [].forEach.call(document.querySelectorAll('.navbar-nav a'), function(elem) {
        if (removeQueryString(elem.href) === removeQueryString(window.location.href))
        elem.classList.add('active')
        else
        elem.classList.remove('active')
    })