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