So ändern Sie die aktive Bootstrap Registerkarte mit Javascript

Question

Ich habe versucht, die aktive Registerkarte zu ändern und fehlgeschlagen, das Javascript onclick Element richtig zu verwenden. Hier ist der Code:

Wie könnte ich in der Lage sein, die Schaltflächen zu verwenden, um die aktive Registerkarte zu ihrer zugeordneten ID zu ändern? Bitte beraten.

Einen schönen Tag!

Answer 1

Sie können auslösen klicken auf der Registerkarte möchten Sie, wenn klicke auf Ihre Tasten

<ul class="nav nav-tabs" style="text-align: left;"> 
    <li class="active"><a href="#first" data-toggle="tab" id="first_tab">First</a></li> 
    <li><a href="#second" data-toggle="tab" id="second_tab">Second</a></li> 
    <li><a href="#third" data-toggle="tab" id="third_tab">Third</a></li> 
</ul> 

<div class="tab-content">   
    <div id="first" class="tab-pane fade in active"> 
     Text   
     <a class="btn btn-primary btn-lg" onclick="$('#second_tab').trigger('click')">Second</a>   
     <a class="btn btn-primary btn-lg" onclick="$('#third_tab').trigger('click')">Third</a>   
    </div> 
    .... 
</div> 

hier ist ein Demo

Answer 2

Ich empfahl diese Codes.

<div class="tab-control" data-role="tab-control"> 
    <ul> 
     <li><a href="#tab1"></a>Tab 1</li> 
     <li><a href="#tab1"></a>Tab 2</li> 
    </ul> 
    <div class="frames"> 
     <div class="frame" id="tab1"> 
      //Content tab 1 
     </div> 
     <div class="frame" id="tab2"> 
      //Content tab 2 
     </div> 
    </div> 
</div> 

Fügen Sie die gewünschten Effekte in das Klassenattribut ein.

function menu3(){ 
    $('[href="#menu3"]').tab('show'); 
} 

Bootstrap Dokumentation:

Answer 3

Sie auch .tab('show') für mehr Flexibilität

https://codepen.io/jacobgoh101/pen/ALELNr

<button class="btn btn-primary" onclick="menu3()">go to menu 3</button> 

Javascript verwenden https://getbootstrap.com/javascript/#tabs