选项卡 - 单击选项卡后，所有选项卡上的活动属性仍然存在

Question

如果你们其中一个人可以帮助我解决这个问题，那将是很好的，无论我尝试什么，标签仍然活跃，我不知道为什么!!

这是html：

＆＃13;

＆＃13;

<div *ngIf="display === 'edit'" class="panel with-nav-tabs panel-default animated ">
  

  <div *ngIf="!isCollapsed" class="animated fadeIn " id="details">
    <form [formGroup]="serverForm" (ngSubmit)="onSubmit()" novalidate>
      <div class="tabbable tabs-below">
        <div class="tab-content" style="min-height: 240px;">
		
          <!--Begin Server Tab-->
          <div class="tab-pane active col-md-12" [id]="'serverTab' + sectionId">
            <div class="col-md-6" style="display: inline-block; float: left;">             
          </div> 
		  <!--End Server Tab-->

          <!--Begin Address Tab-->
          <div *ngIf="companySites.length > 0" class="tab-pane fade col-md-12" [id]="'addressTab' + sectionId">              
          </div>
          <!--End Address Tab-->

          <!--Begin Discount Tab-->
          <div *ngIf="selectedQuoteCenterCode.length > 0"     class="tab-pane fade col-md-12" [id]="'discountTab' + sectionId">
            
          </div>
          <!--End Discount Tab-->

          <!--Begin Concurrency Tab-->
          <div *ngIf="companySites.length > 0"   class="tab-pane fade col-md-12" [id]="'concurrencyTab' + sectionId">
              
          </div>
          <!--End Concurrency Tab-->

          <!--Begin View Tab-->
          <div class="tab-pane fade col-md-12" [id]="'viewTab' + sectionId">
              View Tab
          </div>
          <!--End View Tab-->
		  
        </div>
      </div>
      <ul class="nav nav-tabs">
        <li class="active"><a [href]="'#serverTab' + sectionId" data-toggle="tab">Server</a></li>
        <li [ngClass]="sectionAddressClass" ><a [href]="'#addressTab' + sectionId" data-toggle="tab">Address</a></li>
        <li [ngClass]="sectiondiscountClass" ><a [href]="'#discountTab' + sectionId" data-toggle="tab">Discount</a></li>
        <li [ngClass]="sectionConcurrencyClass" ><a [href]="'#concurrencyTab' + sectionId" data-toggle="tab">Concurrency</a></li>
        <li><a [href]="'#viewTab' + sectionId" data-toggle="tab">Quotes View</a></li>
      </ul>
    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您需要更多信息，请告诉我

使用角度4，此选项卡集嵌套在另一个选项卡

中

Answer 1

好的，所以我解决了这个问题，这是由于放置了活动属性的位置，它应该放在链接本身上，我还将nav-link类添加到链接中

以下是您遇到此问题时的修复：

<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" [href]="'#serverTab' + sectionId" data-toggle="tab">Server</a></li>
    <li [ngClass]="sectionAddressClass" ><a class="nav-link" [href]="'#addressTab' + sectionId" data-toggle="tab">Address</a></li>
    <li [ngClass]="sectiondiscountClass" ><a class="nav-link" [href]="'#discountTab' + sectionId" data-toggle="tab">Discount</a></li>
    <li [ngClass]="sectionConcurrencyClass" ><a class="nav-link" [href]="'#concurrencyTab' + sectionId" data-toggle="tab">Concurrency</a></li>
    <li class="nav-item"><a class="nav-link" [href]="'#viewTab' + sectionId" data-toggle="tab">Quotes View</a></li>
  </ul>