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 that you have read and understand our privacy policy and code of conduct.

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