如何使用 JavaScript 在我的 HTML 导航栏的各个部分添加和删除活动类？

Posted 2023-02-22

【中文标题】如何使用 JavaScript 在我的 HTML 导航栏的各个部分添加和删除活动类？

【英文标题】：How to add and remove the active class on the various sections of my HTML nav bar using JavaScript?

【发布时间】：2022-01-23 22:29:53

【问题描述】：

我有一个导航栏，其中包含网页的四个不同部分名称。当我单击其中一个部分名称时，我希望它处于活动状态（突出显示）并且我希望以前的活动部分名称不再处于活动状态。我一直在尝试许多不同的 javascript 函数和代码，但都没有成功。如果有人可以查看我的代码并让我知道我遗漏了什么或做错了什么，那就太棒了。如果您对我的代码或问题有任何疑问，请告诉我，我将很乐意回答。谢谢。

html 代码（navbar.html）：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
            <a class="navbar-brand js-scroll-trigger" href="#about">
                <span class="d-block d-lg-none">Joseph Smith</span>
                <span class="d-none d-lg-block"><img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="% static 'img/joseph_headshot.jpg' %" /></span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link js-scroll-trigger active" href="#about">About</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#education">Education</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#experience">Experience</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#skills">Skills</a></li>
                </ul>
            </div>
        </nav>

JavaScript 代码 (script.js)：

responsiveNavItems.map(function (responsiveNavItem) 
        responsiveNavItem.addEventListener('click', () => 
            const curr_active = document.getElementsByClassName("navbar-nav").getElementsByTagName('li').getElementsByClassName(".active");
            curr_active[0].className = curr_active[0].className.replace(" active", "");
            responsiveNavItem.className += " active";
            
        );
    );

【参考方案1】：

我认为主要问题可能是在查找具有该类名称的元素时“活动”之前的时间段。

试试这个...

responsiveNavItems.map(function (responsiveNavItem) 
  responsiveNavItem.addEventListener('click', nav_link_click);
);

function nav_link_click() 
  const curr_active = document.getElementsByClassName('navbar-nav').getElementsByTagName('li').getElementsByClassName('active');
  curr_active[0].classList.remove('active');
  this.classList.add('active');

【讨论】：

我认为这可能与我的 javascript 文件未找到或无法识别有关。当我查看我网站的开发人员工具时，我收到错误“net::ERR_ABORTED 404（未找到）”。我拥有的唯一 javascript 文件是 script.js 文件。我在我的 html 文件中的代码是：