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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn