0

I have a div with multiple tabs that display nested divs when you click on each tab. I need to know how I can display the second tab automatically at page load:

  <div style="border: solid 1px #ddd; padding: 6px 6px; min-height: 300px;">
                <ul id="tabs" class="nav nav-tabs">
                    <li><a href="#general" data-toggle="tab">General Info</a></li>
                    <li><a href="#narrative" data-toggle="tab">Narrative</a></li>
                     <li><a href="#audit" data-toggle="tab">Audit</a></li>
               </ul>
                <div id="my-tab-content" class="tab-content paddingbottom20">
                    <div id="general" class="tab-pane">

                  </div>
                     <div id="narrative" class="tab-pane">

                    </div>
                    <div id="audit" class="tab-pane">

                    </div>
               </div>
            </div>
user3272686
  • 853
  • 2
  • 11
  • 23

2 Answers2

5

Use "active" class.

 <li class="active"><a href="#narrative" data-toggle="tab">Narrative</a></li>

 <div id="narrative" class="tab-pane active"></div>
Lokesh Suthar
  • 3,201
  • 1
  • 16
  • 28
  • For some reason, on page load it shows that the second tab is active, yet it displays the content of the first tab. I want to achieve the same thing (display second tab content on page load). Any ideas? – user3198079 Nov 26 '15 at 09:09
2

Assuming you're using Bootstrap tabs, try this: https://stackoverflow.com/a/10304394/347455

$(window).load(function(){
    $('#tab a[href="#client_tab2"]').tab('show');
});

ETA: as other answer points out, "active" class also works

Community
  • 1
  • 1
pennstatephil
  • 1,593
  • 3
  • 22
  • 43