There is a section on the bootstrap tabs from the example . They work, they switch, everything is ok, but I have a question: how can I switch any of the tabs with my independent button now?

 <a class="btn bt-info" id="btn-bottom" data-toggle="tab">Show Third</a>

Coach in fidle

 if ($('#btn-bottom').length) { $('#btn-bottom[data-toggle="tab"]').on('shown.bs.tab', function(e) { e.target // newly activated tab e.relatedTarget // previous active tab }); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">First</div> <div role="tabpanel" class="tab-pane" id="profile">Second</div> <div role="tabpanel" class="tab-pane" id="messages">Third</div> <div role="tabpanel" class="tab-pane" id="settings">Forth</div> </div> <a class="btn bt-info" id="btn-bottom" data-toggle="tab">Show Third</a> </div>

  • one
    Look here - WhyTry

1 answer 1

If you want to click on a specific tab then:

 <script> $(document).ready(function(){ $('[data-toggle="tab"]').click(function(){ $('.nav-tabs a[href="#messages"]').tab('show'); }); }); </script>