我正在使用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>
我的问题是:如何突出显示导航栏中与我目前正在浏览的网站部分相对应的链接?例如,如果我正在查看有关该部分的小组,我希望在导航栏上有一个active
CSS类:<li class="nav-item active"><a class="nav-link" href="#about">Sobre</a></li>
。
答案 0 :(得分: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');
}