如何使用 JavaScript 在我的 HTML 導航欄的各個部分添加和刪除活動的 class？

Question

我有一個導航欄，其中有四個不同的網頁部分名稱。 當我單擊其中一個部分名稱時，我希望它處於活動狀態（突出顯示）並且我希望以前的活動部分名稱不再處於活動狀態。 我一直在嘗試許多不同的 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' %}"alt="..." /></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";
            }
        });
    });

Answer 1

我認為主要問題可能是在尋找具有該 class 名稱的元素時“活動”之前的時期。

嘗試這個...

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');
}

Answer 2

您可以使用 querySelector()。 它允許您找到與一個或多個 CSS 選擇器匹配的第一個元素。 您可以在文檔或任何 HTML 元素上調用 querySelector() 方法。

function myFunction(e) {
  var elements = document.querySelector(".active");
  if(elements !==null){
   elements.classList.remove("active");
  }
 e.target.className = "active";
}