Question

这是我的代码：

<div [id]="id" class="modal fade" tabindex="-1">
  <div class="modal-dialog modal-full">
    <div class="modal-content">
      <div class="modal-header bg-danger">
        <h6 class="modal-title"</h6>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <form #editViewForm="ngForm" (ngSubmit)="onSubmit()" id="editViewForm" autocomplete="off">
        <div id="tabs" class="modal-body">
          <!--Tabs Nav-->
          <ul class="nav nav-tabs nav-tabs-highlight mb-0">
            <li class="nav-item"><a href="#bordered-tab1" id="active_tab" class="nav-link active" data-toggle="tab">TAB 1</a></li>
            <li class="nav-item"><a href="#bordered-tab2" class="nav-link" data-toggle="tab">TAB 2</a></li>
            <li class="nav-item"><a href="#bordered-tab3" class="nav-link" data-toggle="tab" style="display:none;">TAB 3</a></li>
            <li class="nav-item"><a href="#bordered-tab4" class="nav-link" data-toggle="tab">TAB 4</a></li>
          </ul>
         </div>
        </form>
    </div>
</div>

如何在每次打开此模式时将TAB 1设置为打开，以防我在tab3上关闭模式时再次打开模式时希望TAB 1处于活动状态

我已经尝试过了：

我在第一个选项卡上添加了ID，例如：active_tab，所以我说了这样的话，当这个显示被调用时（模式正在打开），我们可以设置两个类show和active，但是不幸的是没有工作...

  show() {
    alert("ok");
    $('#active_tab' + this.id).addClass('active');
    $('#active_tab' + this.id).addClass('show');
    $('#' + this.id).modal('show');

  }

谢谢大家干杯

Answer 1

请给我们[ngClass] =“ {'active'：tabName ==='tab1'}”

 <ul class="nav nav-tabs nav-tabs-highlight mb-0">
        <li class="nav-item"><a href="#bordered-tab1" class="nav-link" [ngClass]="{'active': tabName === 'tab1'}" data-toggle="tab">TAB 1</a></li>
        <li class="nav-item"><a href="#bordered-tab2" [ngClass]="{'active': tabName === 'tab2'}" class="nav-link" data-toggle="tab">TAB 2</a></li>
        <li class="nav-item"><a href="#bordered-tab3" [ngClass]="{'active': tabName === 'tab3'}" class="nav-link" data-toggle="tab" style="display:none;">TAB 3</a></li>
        <li class="nav-item"><a href="#bordered-tab4" class="nav-link" data-toggle="tab" [ngClass]="{'active': tabName === 'tab4'}">TAB 4</a></li>
      </ul>

，然后在组件的ngOnInt事件上，设置this.tabName ='tab1'

tabName: string;  

ngOnInit() {
  this.tabName = 'tab1'
}

打开模态时，如何将其设置为模式的第一个选项卡

1 个答案: