如何通过单击引导导航栏中一个选项卡中的锚点链接导航到另一个选项卡

Question

我已经实现了boostrap导航标签。我在一个标签中有一个锚链接，如果我单击该链接，它应该重定向到另一个标签。下面是代码。

<nav class="flex-fill d-flex">
            <div class="nav nav-tabs" role="tablist">
              <a href="#home" class="nav-link active" id="home-tab" role="tab" data-toggle="tab" aria-controls="prog" aria-selected="true">Home</a>
              <a href="#basic" class="nav-link " id="basic-tab" role="tab" data-toggle="tab" aria-controls="basic" aria-selected="false">Basic</a>
              <a href="#index" class="nav-link" id="index-tab" role="tab" data-toggle="tab" aria-controls="scope" aria-selected="false">Index</a>
            </div>
</nav>

<div id="home" class="tab-pane active" role="tabpanel" aria-labelledby="home-tab">                  
                    <ul>
                      <li>
                        <a href="#basic" data-toggle="tab" a>Basic Details</a>
</li>
</ul>
</div>

<div id="basic" class="tab-pane" role="tabpanel" aria-labelledby="basic-tab">                  
             <p>content</p>
</div>

<div id="index" class="tab-pane" role="tabpanel" aria-labelledby="index-tab">                  
              <p>content</p>
</div>

我已在行下添加

  <a href="#basic" data-toggle="tab" a>Basic Details</a> 

导航到基本选项卡。。但不能导航到另一个选项卡。

Answer 1

您需要使用*ngIf angular指令显示/隐藏制表符内容>

    <ul class=""nav nav-tabs side_nav"" role=""tablist"">
              <a href=""#home"" class=""nav-link active"" id=""home-tab"" role=""tab"" data-toggle=""tab"" aria-controls=""prog"" aria-selected=""true""  [class.active]=""selectedwallet===home"">Home</a>
              <a href=""#basic"" class=""nav-link "" id=""basic-tab"" role=""tab"" data-toggle=""tab"" aria-controls=""basic"" aria-selected=""false"" [class.active]=""selectedwallet===basic"">Basic</a>
              <a href=""#index"" class=""nav-link"" id=""index-tab"" role=""tab"" data-toggle=""tab"" aria-controls=""scope"" aria-selected=""false"" [class.active]=""selectedwallet===index"">Index</a>
      </li>
    </ul>

    <div class=""tab-content"">
      <div *ngIf=""selectedwallet === home"" role=""tabpanel"" class=""tab-pane active"" id=""one"">wallet 1 content</div>
      <div *ngIf=""selectedwallet === basic"" role=""tabpanel"" class=""tab-pane active"" id=""two"">wallet 2 content</div>
      <div *ngIf=""selectedwallet === index"" role=""tabpanel"" class=""tab-pane active"" id=""two"">wallet index</div>
    </div>
TS文件

coinwallet: string[] = ['home','basic','index'];    
selectedwallet = this.coinwallet[0];