data-toggle="tab" , activating second tab on page load

Question

I know this question has already been asked, I have gone through the previous questions but somehow nothing worked for me so I thought I should post this.

I want to highlight the second tab on page load and when a particular button is clicked, I want to highlight the first tab.

Setting class as "Tab Pane Active" for the second tab doesn't work.

<ul class="nav nav-tabs">
    <li><a href="#search" data-toggle="tab">Search</a></li>
    <li><a href="#home" data-toggle="tab">User Details</a></li>
    <li><a href="#info" data-toggle="tab">More Info</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="search">...Content...</div>
    <div class="tab-pane active" id="home">...Content...</div>
    <div class="tab-pane" id="info">...Content...</div>
</div>

Answer 1

You have an active class on the 2nd tab pane, showing that initially, but not on the actual tab li. So you're seeing the second tabs content, but not a selected state on the tab. You need to change:

<li><a href="#home" data-toggle="tab">User Details</a></li>

to

<li class="active"><a href="#home" data-toggle="tab">User Details</a></li>

And to select tabs with jQuery:

// To select the first tab
$('.nav-tabs li:first-child a').tab('show'); 
// To select the second tab
$('.nav-tabs li:eq(1) a').tab('show'); 

You can use this on page load if you like (within $(document).ready() or whatever you're using), though it's probably just best to fix the markup. You can use it within your event listener for your button.

See this example: http://www.bootply.com/kkmcecadLb