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

时间:2017-10-02 13:44:46

标签: html css tabs

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

these tabs are nested within another tab

这是html:



<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,此选项卡集嵌套在另一个选项卡

1 个答案:

答案 0 :(得分:0)

好的,所以我解决了这个问题,这是由于放置了活动属性的位置,它应该放在链接本身上,我还将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>