How to change active bootstrap tab with javascript

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

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