单击时将活动类添加到“li”内的导航栏项目链接（哈希 id url）

Question

我有一个单页面应用程序，大部分部分都在索引页面内（登录页面除外）， 如何在单击时将活动类添加到导航栏项目链接“li”，并将正确的 URL 路径与哈希 id 相匹配，例如 URL 为“/#services”。在我的“li”链接项目上。

我正在使用 nextjs 版本 15 。

    <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
      <li className="nav-item">
        <Link
          className="nav-link  p-lg-3 p-4 "

          href="/"
        >
          Home
        </Link>
      </li>
      <li className="nav-item">
        

      <Link 
        className="nav-link  p-lg-3 p-4 "
      
      href="/#product"> 
        Products
      </Link>

      </li>
      <li className="nav-item">
        <Link
        
        className={`${router.asPath == "/#services" ? "active" : ""} nav-link p-lg-3 p-4`}
        href="/#services"
       
        >
          Services
        </Link>
      </li>
      <li className="nav-item">
        <Link className="nav-link p-lg-3 p-4" href="/#about_us" >
          About us
        </Link>
      </li>

      
      <li className="nav-item">
        <Link className="nav-link p-lg-3 p-4" href="/#">
          Support
          
        </Link>
      </li>
      <li className="nav-item">
        <Link className="nav-link p-lg-3 p-4" href="/account/login">
          Login
        </Link>
      </li>
    </ul>

我已经尝试过：

   className={`${router.asPath == "/#services" ? "active" : ""} nav-link p-lg-3 p-4`}

但没有工作。

Answer 1

谢谢大家，经过多次搜索，我找到了解决方案，不仅在单击链接时会添加“active”类，甚至当我滚动到该部分时也会自动将“active”类添加到导航栏链接。这是我的解决方案：

首先： 1-将类添加到“li”内的“a”项，与#id_link同名（也具有相同的部分id），例如，我的导航栏中的jsx是：

  <nav className="navbar navbar-expand-lg background-color sticky-top">
    <div className="container-fluid">
      <a className="navbar-brand" href="#">
        <img src="/Images/company.png" alt="" />
      </a>
      <button
        className="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <i className="fa-solid fa-bars-staggered" />
      </button>
      <div className="collapse navbar-collapse" id="navbarSupportedContent">
        <button type="button" className="btn btn-primary ps-4 pe-4">
          Contact Us
        </button>
        <div className="Eng p-2 d-none d-lg-block">
          <i className="fa-solid fa-globe" />
          <span>English</span>
        </div>

        <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
          <li className="nav-item">
            <Link
              className="nav-link  p-lg-3 p-4 "

              href="/"
            >
              Home
            </Link>
          </li>
          <li className="nav-item ">
            

          <Link 
            className="nav-link  p-lg-3 p-4 product "
          
          href="/#product"> 
            Products
          </Link>

          </li>
          <li className="nav-item">
            <Link
            className="nav-link  p-lg-3 p-4 services "

            href="/#services"
           
            >
              Services
            </Link>
          </li>
          <li className="nav-item">
            <Link className="nav-link p-lg-3 p-4 about_us" href="/#about_us" >
              About us
            </Link>
          </li>

          
          <li className="nav-item">
            <Link className="nav-link p-lg-3 p-4" href="/#">
              Support
              
            </Link>
          </li>
          <li className="nav-item">
            <Link className="nav-link p-lg-3 p-4" href="/account/login">
              Login
            </Link>
          </li>
        </ul>


      </div>
    </div>
  </nav>

2- 创建新的 html 部分元素（包括所有子元素）并为其指定目标 id，例如这只是 1 部分：

  <section id="services"> 

  <div className="pack">
    <div className="serv background-image" />
    <div className="container-fluid d-flex align-items-center justify-content-evenly flex-lg-row flex-column">
      <div className="ft d-flex flex-column justify-content-evenly text-center justify-content-lg-center">
        <h2>Our Services</h2>
        <p> the Best in the markets</p>
      </div>
      <div className="text-11  ">
        <h3>
          We are committed to give the perfect scenarios of the following:
        </h3>
        <ul className="list-1">
          <li>Surveillance Systems</li>
          <li>Monitoring Systems</li>
          <li>Storage Solutions</li>
          <li>Asymmetric &amp; Symmetric DSL</li>
          <li>Fiber Connections</li>
          <li>Microwave Link installation</li>
        </ul>
      </div>
    </div>
  </div>

  </section> 

3- 在导航栏组件中使用 useEffect 并添加以下 js 代码：

const pathname = usePathname() // remount the component if path changed
useEffect( () => {

  const sections = document.querySelectorAll("section");
  const navLi_a = document.querySelectorAll("nav .container-fluid .navbar-collapse ul li a ");    
  window.onscroll = () => {
    var current = "";
    sections.forEach((section) => {
      const sectionTop = section.offsetTop;
      if (scrollY  >= sectionTop - 60) {
        current = section.getAttribute("id"); }
    });
  
    navLi_a.forEach((a) => {
      a.classList.remove("active_nav_link");
      if (a.classList.contains(current)) {  
          a.classList.add("active_nav_link");
        }
    });
  };

},[pathname] )  

4-完成。