jquery - How to change active bootstrap tab with javascript -
i have tried change active tab , failed use javascript onclick element correctly. here's 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 second” data-toggle="tab">second</a> <a href="#third" class="btn btn-primary btn-lg" onclick=“change active tab 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 able use buttons change active tab associated id? please advise.
have great day!
you can trigger click on tab want when click on 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 demo
Comments
Post a Comment