将自定义 CSS 添加到导航选项卡向导答案

【问题标题】：add custom css to navigation tab wizard将自定义 CSS 添加到导航选项卡向导
【发布时间】：2020-11-21 08:09:03
【问题描述】：

我需要在导航选项卡向导中突出显示选定的选项卡。选项卡功能工作正常..但我需要为所有选定的选项卡添加 CSS（边框样式）。例如，如果我有 4 个标签。如果我选择了第一个和第二个选项卡（下一个按钮），这些选项卡需要突出显示（应用边框），如果我单击后退按钮，则需要删除突出显示。任何帮助将不胜感激。请在下面找到图片以供参考。

        
public tabs: string[] = ['tab1', 'tab2', 'tabs3', 'tabs4']   
public next(): void {
    const currentIndex: number = this.tabs.indexOf(this.selectedTab);
    const newIndex = currentIndex + 1;
    this.selectedTab = this.tabs[newIndex];
  }

  public back(): void {
    const currentIndex: number = this.tabs.indexOf(this.selectedTab);
    const newIndex = currentIndex - 1;
    this.selectedTab = this.tabs[newIndex];
  }

.tab-highlight { 
    border-top: 2px solid blue;
    cursor: pointer;
}

<ul class="nav nav-tabs side_nav" role="tablist">
<li *ngFor="let tab of tabs; let i= index;" [attr.data-index]="i" role="presentation"
            class="accounts_li"
            [class.active]="selectedTab===tab" (click)="toggle($event)">
          <a (click)="selectedTab = tab" aria-controls="one" role="tab" data-toggle="tab">{{tab}}</a>
        </li></ul>
        
        <div class="tab-content">
        <div id="tab1" *ngIf="selectedTab === tabs[0]" role="tabpanel" class="tab-pane active">
        tab1 content
        </div>
        
          <div id="tab2" *ngIf="selectedTab === tabs[1]" role="tabpanel" class="tab-pane active">
        tab2 content
        </div>
          <div id="tab3" *ngIf="selectedTab === tabs[2]" role="tabpanel" class="tab-pane active">
    tab3 content
    </div>
        </div>

<button class="button" (click)="back()"><span>
            Back</span>
          </button>
          
          <button class="button" (click)="next()"><span>
           Next</span>
          </button>

image

【问题讨论】：

标签： javascript css angular typescript frontend

【解决方案1】：

如果您想选择多个选项卡，那么您应该将selectedTab 属性更改为一个包含所有选定选项卡的数组。然后你可以创建一个方法来检查选项卡是否被选中，以便从选定的数组中推送/删除。最后，对于条件类名称，您可以使用[ngClass]="isSelected(tab) ? 'tab-highlight' : null"，这将仅在条件评估为真时添加类（更多信息请参见https://angular.io/api/common/NgClass）

组件代码：

  tabs: string[] = ["tab1", "tab2", "tab3", "tab4"];
  selectedTabs: string[] = [];

  onTabClick(tab) {
    if (this.isSelected(tab)) {
      let index = this.selectedTabs.indexOf(tab);
      this.selectedTabs.splice(index, 1);
    } else {
      this.selectedTabs.push(tab);
    }
  }

  isSelected(tab: string) {
    return this.selectedTabs.indexOf(tab) > -1;
  }

标签菜单的 HTML 代码：

<ul class="nav nav-tabs side_nav" role="tablist">
    <li *ngFor="let tab of tabs; let i= index;" [attr.data-index]="i" role="presentation"
        [ngClass]="isSelected(tab) ? 'tab-highlight' : null">
        <a (click)="onTabClick(tab)" aria-controls="one" role="tab" data-toggle="tab">{{tab}}</a>
    </li>
</ul>

Stackblitz：https://stackblitz.com/edit/question63192497?file=src%2Fapp%2Fapp.component.ts

【讨论】：