Geek Answers Handbook

How to make loading boot tab 3 tab nav active by default?

Using bootstrap 3 I am trying to use this exameple using class = "active" in the li element. Unfortunately, when the page is not initially displayed, no tab bar is displayed, the contents of the entire bookmark are empty. The correct tab displays are displayed, and when I explicitly click on the tab, the correct panel appears.

What am I missing?

Thanks in advance.

<ul class="nav nav-tabs"> <li class="active"><a href="#graduation" data-toggle="tab">graduation</a></li> <li><a href="#graduate" data-toggle="tab">graduate</a></li> <li><a href="#extension" data-toggle="tab">extension</a></li> </ul> <div class="tab-content" id="TabContent"> <div class="tab-pane fade" id="graduation"> <p> anything </p> </div> <div class="tab-pane fade" id="graduate"> <p> graduate </p> </div> <div class="tab-pane fade" id="extension"> <p> extension </p> </div> </div>
+8
html5 css3 twitter-bootstrap twitter-bootstrap-3
source share
2 answers

You also need to specify the active class by default tab-pane (and for the attenuation tabs you need to add the in class), so you have to change

 <div class="tab-pane fade" id="graduation">

to

 <div class="tab-pane fade in active" id="graduation">
+21
source share

For those looking for an answer to bootstrap 4

boostrap 4

 <div class="tab-pane fade show active" id="graduation"> <div class="tab-pane fade" id="graduation">

Compared to boostrap 3

 <div class="tab-pane fade in active" id="graduation"> <div class="tab-pane fade in" id="graduation">
+2
source share

More articles:


All Articles