使用 javascript 激活的导航栏答案

【问题标题】：Navbar active using javascript使用 javascript 激活的导航栏
【发布时间】：2021-08-20 01:29:54
【问题描述】：

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

HTML：

<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>

JS：

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";
            }
        }

【问题讨论】：

你想问什么？您的意思是要制作nav js 文件并在每个页面上加载它？
是的，也在子页面中
如果nav 元素在您的网站上冲浪时打开，那么在单击菜单时应该触发添加和删除类。所以以nav.addEventListener('click', func)开头可以使js函数。

标签： javascript html css web

【解决方案1】：

根据我从您的问题中读到的内容，您希望导航栏在单击时改变颜色。这可以通过两种不同的方式轻松实现。

首先是创建一个#Active id，该id 将提供给每个页面上正确的导航栏链接。 (更多here)

第二个是如果您停留在同一页面上但仍希望按钮在单击时改变颜色。 (更多here)

任何一种方式都有效。

有问题吗？下方评论下载。喜欢我的回答吗？给我一个复选标记并投票。

【讨论】：