[ACCEPTED]-data-toggle="tab" , activating second tab on page load-tabs

Accepted answer
Score: 15

You have an active class on the 2nd tab 10 pane, showing that initially, but not on 9 the actual tab li. So you're seeing the 8 second tabs content, but not a selected 7 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 6 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 5 on page load if you like (within $(document).ready() or whatever 4 you're using), though it's probably just 3 best to fix the markup. You can use it within 2 your event listener for your button.

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

More Related questions