How to change active bootstrap tab with javascript : <p>I have tried to change the active tab and failed to use the javascript onclick element correctly. Here's the code:</p>

<pre><code>&lt;ul class="nav nav-tabs" style="text-align: left;"&gt;
    &lt;li class="active"&gt;&lt;a href="#first" data-toggle="tab"&gt;First&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#second" data-toggle="tab"&gt;Second&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#third" data-toggle="tab"&gt;Third&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=“tab-content"&gt;

&lt;div id="first" class="tab-pane fade in active”&gt;
Text

&lt;a href="#second" class="btn btn-primary btn-lg" onclick=“CHANGE ACTIVE TAB TO SECOND” data-toggle="tab"&gt;Second&lt;/a&gt;

&lt;a href="#third" class="btn btn-primary btn-lg" onclick=“CHANGE ACTIVE TAB TO THIRD” data-toggle=“tab"&gt;Third&lt;/a&gt;

&lt;/div&gt;


&lt;div id="second" class="tab-pane fade in”&gt;
Text
&lt;/div&gt;


&lt;div id="third" class="tab-pane fade in”&gt;
Text
&lt;/div&gt;


&lt;/div&gt;
</code></pre>

<p>How could I be able to use the buttons to change the active tab to their associated id? Please advise.</p>

<p>Have a great day!</p>
