向导航栏添加活动 class

Question

我的代码是这样的：

<div class="header-nav navbar-collapse collapse ">
      <ul id="navigation" class=" nav navbar-nav">       
                   <li>
                        <a href="index.html">Home</a>
                                
                   </li>
                            
                    <li>
                        <a href="about-us.html">About Us</a>
                    </li>
                     
                    </ul>
                    </div>

当用户在特定页面时，我一直在尝试将活动 class 添加到每个页面，但到目前为止没有成功这是我的脚本的样子：

     var i = 0;
  [].forEach.call(document.querySelectorAll('li > a'), function(nav) {
    console.log(nav.pathname,window.location.pathname);
    if (nav.pathname === window.location.pathname){
        i = 1;
        console.log(i);
      nav.classList.add('active')
    }
        
    else{
         console.log(i)
         nav.classList.removeClass('active')
  }
    

  })

活动 class 设置在“a”而不是“li”上，我不知道如何解决这个问题。也许有人可以帮助我？

Answer 1

要定位父元素，您有几种选择 - 我最喜欢的是 element.closest(selector)，它以 element 作为起始元素，并找到包含与 [=15= 匹配的 closest 的父元素]

let els = document.querySelectorAll('li > a');
els.forEach(el => {
  el.addEventListener('click', e => {
    els.forEach(a => a.closest('li').classList.remove('active'));
    e.target.closest('li').classList.add('active');
  })
})

li.active {
  background-color: green;
}

<ul>
  <li><a href='#'>link 1</a></li>
  <li><a href='#'>link 1</a></li>
  <li><a href='#'>link 1</a></li>
</ul>

Answer 2

在查看 classes 时，您可能正在使用 Bootstrap。我将这些库添加到代码片段中，并更新了一些 classes。我还添加了另一个 href 等于 js 的导航项，因为这是片段 window 的路径名。否则它不会添加活动 class，因为不会有一个相等的路径名。

我还将导航项更改为药丸，这样您可以更轻松地查看活动 link。

var i = 0;
document.querySelectorAll('ul.nav > li > a').forEach((nav) => {
    console.log({
      navPathname: nav.pathname,
      windowLocationPathname: window.location.pathname,
      areEqual: nav.pathname === window.location.pathname,
    });
  if (nav.pathname === window.location.pathname) {
    nav.classList.add('active')
  } else {
    nav.classList.remove('active')
  }
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="navbar navbar-light bg-light">
  <ul id="navigation" class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="js">JS</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="about-us.html">About Us</a>
    </li>
  </ul>
</div>

Answer 3

谢谢，我合并了两个响应并将其合并为一个适合我的响应，这个脚本甚至没有将类触及导航栏：

    document.querySelectorAll('ul.nav > li > a').forEach((nav) => {
    console.log({
      navPathname: nav.pathname,
      windowLocationPathname: window.location.pathname,
      areEqual: nav.pathname === window.location.pathname,
    });
  if (nav.pathname === window.location.pathname) {
    nav.closest('li').classList.add('active')
  } else {
    nav.closest('li').classList.remove('active')
  }
})

向导航栏添加活动 class

Adding an active class to the navbar

html

javascript

navigation

function

jquery-selectors