16

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

2 Answers 2

27

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

0
6

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

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.