What should I do if the bootstrap tab does not respond?

The solution to the problem that the bootstrap tab does not respond: First find the core code of bootstrap tab switching; then modify the button group and content group.

The operating environment of this tutorial: windows10 system, bootstrap3.0. This article is applicable to all brands of computers.

Recommended: "bootstrap video tutorial"

A pitfall I stepped on when using bootstrap (tab switching has no effect)

Used it a few days ago I encountered a problem when navigating the bootstrap tab page:

First of all, the first tab button and the first tab content part are activated by default. When I click the second tab button, the second tab content can be displayed normally. However, when I switch back to the first tab button again, there is no effect. After checking the documentation, I found that both 25edfb22a4f469ecb59f1190150159c6 have class = "active".

In the end, I found out that my document structure did not completely follow the official example. The button container used dc6dce4a544fdca2df29d5ac0ea9906b instead of ff6d136ddc5fdfeffaf53ff6ee95f185.

Finally, let’s sort it out and use bootstrap’s tab switching core code as follows:

<!-- 按钮组 -->
 <ul>
   <li class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
   <li><a href="#profile" data-toggle="tab">Profile</a></li>
   <li><a href="#messages" data-toggle="tab">Messages</a></li>
   <li><a href="#settings" data-toggle="tab">Settings</a></li>
 </ul>
 
<!-- 内容组 -->
 <div class="tab-content">
   <div class="tab-pane active" id="home">...</div>
   <div class="tab-pane" id="profile">...</div>
   <div class="tab-pane" id="messages">...</div>
   <div class="tab-pane" id="settings">...</div>
 </div>

The above is the detailed content of What should I do if the bootstrap tab does not respond?. For more information, please follow other related articles on the PHP Chinese website!