Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 tabs and open first tab on page load

I'm not able to get open first tab on page load. Code below.

    <ul id="rowTab" class="nav nav-tabs">
              <li class="active"><a data-toggle="tab" href="#tab_a">Tab A</a></li>
              <li><a data-toggle="tab" href="#tab_b">Tab B</a></li>
              <li><a data-toggle="tab" href="#tab_c">Tab C</a></li>
              <li><a data-toggle="tab" href="#tab_d">Tab D</a></li>
    </ul>

    <div class="tab-content">
             <div id="tab_a" class="tab-pane fade active">
             Tab A inner
             </div>
             <div id="tab_b" class="tab-pane fade">
             Tab B inner              
             </div>
             <div id="tab_c" class="tab-pane fade">
             Tab C inner       
             </div>
             <div id="tab_d" class="tab-pane fade">
             Tab D inner
             </div>
   </div>

and jQuery

<script type="text/javascript">
    $(document).ready(function(){
        $('#rowTab a:first').tab('show');
    });    
</script>

Any clue why is not working?

Thanks

like image 638
JackTheKnife Avatar asked Apr 10 '14 18:04

JackTheKnife


People also ask

How do you keep the current tab active on page reload in Bootstrap 3?

Answer: Use the HTML5 localStorage Object In Bootstrap, if you refresh the page the tab is reset to default setting. However, you can use the HTML5 localStorage object to save some parameter for the current tab locally in the browser and get it back to make the last active tab selected on page reload.

How do I toggle between tabs in bootstrap?

To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a . tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class . tab-content .

How do you open a specific tab via an external link?

tab=x (where x=tab number) to the URL to display the specific tab. For example: https://demo.dj-extensions.com/dj-tabs/?tab=4 will open 4th tab on the demo site, you can try changing the number to another one to see how it works.


2 Answers

Remove the fade class from the first tab's content..

<div id="tab_a" class="tab-pane active">
    Tab A inner
</div>

http://bootply.com/129046

like image 170
Zim Avatar answered Sep 20 '22 20:09

Zim


And working version with the fade

<div id="tab_a" class="tab-pane active fade in">
    Tab A inner
</div>

Baghoo - Thanks for pointing me to what is causing issue

like image 38
JackTheKnife Avatar answered Sep 20 '22 20:09

JackTheKnife