Maison  >  Article  >  interface Web  >  Que dois-je faire si l’onglet bootstrap ne répond pas ?

Que dois-je faire si l’onglet bootstrap ne répond pas ?

藏色散人
藏色散人original
2020-11-18 10:41:322778parcourir

La solution au problème de l'onglet bootstrap qui ne répond pas : recherchez d'abord le code principal du changement d'onglet bootstrap ; puis modifiez le groupe de boutons et le groupe de contenu.

Que dois-je faire si l’onglet bootstrap ne répond pas ?

L'environnement d'exploitation de ce tutoriel : système Windows10, bootstrap3.0 Cet article est applicable à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel vidéo bootstrap"

Un piège sur lequel j'ai marché lors de l'utilisation de bootstrap (le changement d'onglet n'a aucun effet)

Je l'ai utilisé quelques-uns il y a quelques jours, j'ai rencontré un problème lors de la navigation dans la page de l'onglet bootstrap :

Tout d'abord, le premier bouton d'onglet et la première partie du contenu de l'onglet sont activés par défaut. Lorsque je clique sur le bouton du deuxième onglet, le contenu du deuxième onglet peut être affiché normalement. Cependant, lorsque je reviens au premier bouton d'onglet, il n'y a aucun effet. Après avoir vérifié la documentation, j'ai découvert que les deux 25edfb22a4f469ecb59f1190150159c6

Il s'est avéré que la structure de mon document ne suivait pas exactement l'exemple officiel. Le conteneur de boutons utilisait dc6dce4a544fdca2df29d5ac0ea9906b au lieu de ff6d136ddc5fdfeffaf53ff6ee95f185.

Enfin, mettons les choses au clair. Le code de base pour utiliser le changement d'onglet de bootstrap est le suivant :

<!-- 按钮组 -->
 <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>
.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn