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.
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
Il s'est avéré que la structure de mon document ne suivait pas exactement l'exemple officiel. Le conteneur de boutons utilisait
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
