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 high

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