1

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
    <nav>
          <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
              <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">
                  Project Tab 1
              </a>
              <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">
                  Project Tab 2
              </a>
          </div>
      </nav>
      
      ---
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
        1st section

        <div>
           <div class="tab-pane fade show active" id="nav-profile" role="tabpanel" aria-labelledby="nav-home-tab">
        2nd section

        <div>
      </div>

Hi Team, I have add Bootstrap 4 tabs in angular 9 but but problem is that if i click any tab whole page is redirected instead of tab switch.

I have tried: data-target insted of href but same result.

can anybody tell me how to fix above issue?

Kiran Mistry
  • 2,614
  • 3
  • 12
  • 28
Kapil Soni
  • 1,003
  • 2
  • 15
  • 37

0 Answers0