Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change active bootstrap tab with javascript

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!

like image 946
beamerfan Avatar asked Sep 13 '16 01:09

beamerfan


People also ask

How do I switch tabs in bootstrap?

To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a . tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .

How do I make bootstrap tab active?

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling.

How do I change the active tab color in bootstrap?

You can always modify your navigation list through css. Use this css code instead, in that way use you use the a tag to change the color and its background-color. It's improper to use the li tag to set the background only and a tag to set the color of the text.

How do you make a tab active by default?

Just add the class to your html. This will make the first tab active by default.


1 Answers

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

like image 71
Jacob Goh Avatar answered Sep 19 '22 06:09

Jacob Goh