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

have class = "active".

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

instead of

.

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!