What should I do if the bootstrap tab does not respond?-Bootstrap Tutorial-php.cn

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

藏色散人

Release： 2020-11-30 16:37:06

Original

2782 people have browsed it

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.

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

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>

Copy after login

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!