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. ```

...Content...

```

Accepted Answer

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: ```

User Details

``` to ```

User Details

``` 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

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

Solution

Problem