如何在使用页面锚导航时将“激活”类设置为 Angular 2 中的引导导航栏？

Posted 2023-03-05

【中文标题】如何在使用页面锚导航时将“激活”类设置为 Angular 2 中的引导导航栏？

【英文标题】：How to set "activate" class to bootstrap navbar in Angular 2 while using page anchor navigation?

【发布时间】：2017-10-03 05:20:24

【问题描述】：

我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站。

我创建了一个始终位于页面顶部的导航栏组件，并且我正在使用页面锚导航 (#id)。请注意，我还没有创建路由模块（到目前为止还没有必要这样做）。

导航栏代码如下：

<nav class="navbar navbar-default fixed-top navbar-inverse navbar-toggleable-md">
  <div class="container">

    <div class="navbar-header">
      <button class="navbar-toggler navbar-toggler-right btn btn-outline-secondary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
        <i class="fa fa-bars" aria-hidden="true"></i>
      </button>
      <a class="navbar-brand" href="index.html">Garatéa</a>
    </div>

    <div id="collapseExample" class="navbar-collapse collapse" [ngbCollapse]="isCollapsed">
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link" href="#home">Início</a></li>
        <li class="nav-item"><a class="nav-link" href="#about">Sobre</a></li>
        <li class="nav-item"><a class="nav-link" href="#team">Quem Somos</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contato</a></li>
      </ul>
    </div>
  </div>
</nav>

每个链接对应单页网站的一个版块，例如首页组件模板为：

<div id="home" class="text-center home-background">
  <div class="overlay">
    <div class="content">
      <h1>Bem vindo à <strong><span class="title-text">Garatéa</span></strong></h1>
      <p class="lead">Somos uma inciativa que <strong>aumenta a taxa de sobrevivência</strong> em emergências médicas.</p>
    </div>
  </div>
</div>

我的问题是：如何在导航栏中突出显示与我当前正在浏览的网站部分相对应的链接？例如，如果我正在查看团队 about 部分，我希望导航栏上有一个 active CSS 类：<li class="nav-item active"><a class="nav-link" href="#about">Sobre</a></li>。

【参考方案1】：

您可以在点击<a> 标签时使用 srcElement，如下所示

<a class="nav-link" (click)="clickedLink($event)">Início</a>
<a class="nav-link" (click)="clickedLink($event)">Início</a>
<a class="nav-link" (click)="clickedLink($event)">Início</a>

方法如下

clickedLink(e)
let element = e.srcElement;

console.log(e)
for(let i =0; i <element.parentElement.children.length ; i++)
  if(element.parentElement.children[i].classList.contains('active'))
    element.parentElement.children[i].classList.remove('active')
  

element.classList.add('active');

LIVE DEMO

【讨论】：

嗨@Aravind，感谢您的出色回答！然而，我想做的另一件事是不仅在我单击它们时将活动类设置为链接，而且在我滚动页面时也是如此。例如，关于链接 (Sobre) 应该在我点击它时激活，或者如果我向下滚动到 About 组件。你对滚动部分有什么建议吗？

我没明白你的意思，你能详细说明一下吗？如果这个答案有助于标记它并投票赞成

好吧，由于我的网站是一个单页应用程序，用户可以通过向下滚动或单击上面的链接访问其每个部分（每个链接将用户带到网站的一个部分，所有部分在同一页中）。我想在导航栏上突出显示正确的部分链接，无论用户是点击链接还是向下滚动。

但是您的菜单将位于同一父级ul