Как перейти на другую вкладку, нажав на ссылку привязки на одной вкладке в bootstrap navtabs - PullRequest
Новая
       17

Как перейти на другую вкладку, нажав на ссылку привязки на одной вкладке в bootstrap navtabs

0 голосов
/ 25 марта 2020

Я реализовал навигационные вкладки 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>

, чтобы перейти к вкладке basi c, но не перейти к другой вкладке.

Ответы [ 2 ]

0 голосов
/ 25 марта 2020

Судя по всему, вы все еще кодируете старый традиционный способ создания веб-сайта.

angular обеспечивает маршрутизацию, чтобы вы могли полностью контролировать страницу, на которую вы переходите, а также чтобы у вас было меньше код в шаблоне.

вместо 

<a href="#basic" class="nav-link " id="basic-tab" role="tab" data-toggle="tab" aria-controls="basic" aria-selected="false">Basic</a>

вы можете создать новый компонент и поместить его в свой app-routing. Тогда у вас будет что-то подобное 

<a [routerLink]="\basic" class="nav-link " id="basic-tab" role="tab" data-toggle="tab" aria-controls="basic" aria-selected="false">Basic</a>

или в вашей машинописи: 

import {  Router } from '@angular/router';


constructor(private router: Router)

 this.router.navigate(['/basic']);
0 голосов
/ 25 марта 2020

вам нужно показать / скрыть табуляцию, используя директиву *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];
...