Question

**一切都显示完美，但是如何在不使用任何第三方组件的情况下突出显示一个人正在做的事情，我希望有人能对此提供帮助。

谢谢。**

 <ul class="tabs">
<li [ngClass]=" {'active-tab': tab==1 }"><a (click)=" tab = 1 " href="javascript:void(0)">Tab 1</a></li>
<li [ngClass]=" {'active-tab': tab==2 }"><a (click)=" tab = 2 " href="javascript:void(0)">Tab 2</a></li>
<li [ngClass]=" {'active-tab': tab==3 }"><a (click)=" tab = 3 " href="javascript:void(0)">Tab 3</a></li>df
</ul>

<div class="tab-panel" id="tabPanel1" *ngIf="tab==1">
    ABC TAB 1
</div>
<div class="tab-panel" id="tabPanel2" *ngIf="tab==2">
    ABC TAB 2
</div>
<div class="tab-panel" id="tabPanel3" *ngIf="tab==3">
    ABC TAB 3
</div>

打字稿在这里

home.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  tab: number = 3;
  constructor() { }

  ngOnInit() {
  }

}

enter code here

Answer 1

您有条件将OPEN customers('city name here');类添加到列表中的选定选项卡项目。在CSS中使用此类可突出显示所需的列表项。

您在列表项中拥有active-tab锚点元素，但实际上并未使用其<a>属性。另外，如果不覆盖锚元素的默认样式，就很难对其进行样式设置。

您可以将href锚元素替换为<a>元素，并根据需要设置其样式。

HTML：

<span>

CSS：

<ul class="tabs">
  <li [ngClass]=" {'active-tab': tab==1 }"><span (click)=" tab = 1 ">Tab 1</span></li>
  <li [ngClass]=" {'active-tab': tab==2 }"><span (click)=" tab = 2 ">Tab 2</span></li>
  <li [ngClass]=" {'active-tab': tab==3 }"><span (click)=" tab = 3 ">Tab 3</span></li>
</ul>

StackBlitz上的实时演示： https://stackblitz.com/edit/angular-7eomzn

如何突出显示角度6中的活动选项卡

1 个答案: