如何设置“激活"功能.类在使用页面锚点导航时在Angular 2中引导导航栏? [英] How to set "activate" class to bootstrap navbar in Angular 2 while using page anchor navigation?

问题描述

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

I am creating a single page website using Angular 2 and Bootstrap 4.

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

I created a navbar component that is always on top of the page and I am using page anchor navigation (#id). Please note that I haven't created a routing module (so far it hasn't been necessary to do this).

导航栏代码如下:

<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>

每个链接对应于单页网站的一部分，例如，home组件模板为:

Each link corresponds to a section of the single page website, for example, the home component template is:

<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>

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

My question is: how can I highlight the link in the navbar that corresponds to the section of the website that I am currently browsing? For example, if I am looking at the team about section, I expect to have an active CSS class on the navbar: <li class="nav-item active"><a class="nav-link" href="#about">Sobre</a></li>.

推荐答案

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

You can use the srcElement on click of that <a> tag as below

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

}

实时演示

这篇关于如何设置“激活"功能.类在使用页面锚点导航时在Angular 2中引导导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！