I have tried to change the active tab and failed to use the javascript onclick element correctly. Here's the code:
<ul class="nav nav-tabs" style="text-align: left;">
<li class="active"><a href="#first" data-toggle="tab">First</a></li>
<li><a href="#second" data-toggle="tab">Second</a></li>
<li><a href="#third" data-toggle="tab">Third</a></li>
</ul>
<div class=“tab-content">
<div id="first" class="tab-pane fade in active">
Text
<a href="#second" class="btn btn-primary btn-lg" onclick="CHANGE ACTIVE TAB TO SECOND" data-toggle="tab">Second</a>
<a href="#third" class="btn btn-primary btn-lg" onclick="CHANGE ACTIVE TAB TO THIRD" data-toggle="tab">Third</a>
</div>
<div id="second" class="tab-pane fade in">
Text
</div>
<div id="third" class="tab-pane fade in">
Text
</div>
</div>
How could I be able to use the buttons to change the active tab to their associated id? Please advise.
Have a great day!
you may also use .tab('show')
for more flexibility
https://codepen.io/jacobgoh101/pen/ALELNr
<button class="btn btn-primary" onclick="menu3()">go to menu 3</button>
javascript:
function menu3(){
$('[href="#menu3"]').tab('show');
}
Bootstrap documentation: https://getbootstrap.com/javascript/#tabs
You can trigger click on tab you want when click on your buttons
<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>
here is a Demo
I recommend the data attribute approach, is a clean solution and separate View from Controller code
<a href="#btn-next"data-next="#tab1" class="btn btn-primary">go to menu 1</a>
<a href="#btn-next"data-next="#tab2" class="btn btn-primary">go to menu 2</a>
javascript:
$('a[href="#btn-next"]').on('click', function(event){
event.preventDefault();
var tab = $(this).data('next');
$(tab).tab('show');
})
Updated on bootstrap5
<div class="tab-control" data-role="tab-control">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></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>
var someTabTriggerEl = document.querySelector('#tab1');
var tab = new bootstrap.Tab(someTabTriggerEl);
tab.show();
Here is your js
$('#submit').click(function (e) {
$('#myTab a[href=#tabs3-2k_tab2]').tab('show')
e.preventDefault()
});
Working example
jQuery(document).ready(function ($) { $('#tabs').tab(); }); $('button').addClass('btn-primary').text('Switch to Orange Tab'); $('button').click(function(){ $('#tabs a[href=#orange]').tab('show'); });
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="container"> <center><h6>Switching Among the Tabs</h6></center> <div id="content"> <ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> <li class="active"><a href="#red" data-toggle="tab">Red</a> </li> <li><a href="#orange" data-toggle="tab">Orange</a></li> <li><a href="#yellow" data-toggle="tab">Yellow</a></li> <li><a href="#green" data-toggle="tab">Green</a></li> <li><a href="#blue" data-toggle="tab">Blue</a></li> </ul> <div id="my-tab-content" class="tab-content"> <div class="tab-pane active" id="red"> <h1>Red</h1> <p>red red red red red red</p> <button>Blue</button> </div> <div class="tab-pane" id="orange"> <h1>Orange</h1> <p>orange orange orange orange orange</p> <button>Blue</button> </div> <div class="tab-pane" id="yellow"> <h1>Yellow</h1> <p>yellow yellow yellow yellow yellow</p> <button>Blue</button> </div> <div class="tab-pane" id="green"> <h1>Green</h1> <p>green green green green green</p> <button>Blue</button> </div> <div class="tab-pane" id="blue"> <h1>Blue</h1> <p>blue blue blue blue blue</p> <button>Blue</button> </div> </div> </div> </div>
This is simple and works.
function do_something () {
$('#profile-tab').click();
}
If you are using Scala, refer to https://www.tutorialspoint.com/ngx_bootstrap/ngx_bootstrap_tabs.htm , namely:
<tabset>
<tab heading="View">
<tab heading="Configuration" (selectTab)="showConfig()==true" [active]="showConfig()">`
</tabset>
(you need both selectTab and active)...
The click() solutions suggested by others are working, but are generating exception "Expression has changed after it was checked." so it seams a bad habit, even if the exception is not raised in production mode.
//bad code!
ngAfterViewInit() {
if (thisCreation){
document.getElementById("tabConfig-link").click();
}
}
I recommended this codes.
<div class="tab-control" data-role="tab-control">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></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>
Add effects that you want in class attribute.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.