Le contrôle des onglets dans Bootstrap est très populaire parmi les développeurs pour sa simplicité et sa facilité d'utilisation. Cependant, son style est relativement unique, comment peut-il réaliser un effet plus beau en fonction de sa forme d'origine? J'ai envisagé ce problème. De plus, les onglets dans Bootstrap doivent cliquer sur chaque onglet pour atteindre la commutation. Pouvez-vous utiliser jQuery pour contrôler sa commutation automatique et le laisser passer d'un onglet à un autre après une période de temps (comme 5 secondes)? Ce qui suit est mon processus d'implémentation, tout d'abord, le code HTML de la pièce des onglets:
<div role = "tabpanel"> <! - NAV Tabs -> <ul role = "tablist" style = "margin-top: 0px;" id = "Doctabs"> <li role = "présentation"> <a href = "# section_new" aria-controls = "home" role = "tab" data-toggle = "tab"> le dernier </a> <li role = "présentation"> <a href = "# section_week" aria-controls = "profil" role = "tab" data-toggle = "tab"> populaire dans 7 Fairs <fil role = "présentation"> <a href = "# section_month" aria-controls = "messages" role = "tab" data-toggle = "tab"> populaire en 30 jours </a> </ul> <! - Tab Panes -> <div> <div role = "tabpanel" id = "section_new"> <p>
Contenu dans TAB1
</p> </div> <div role = "tabpanel" id = "section_week"> <p>
Contenu dans TAB2
</p> </div> <div role = "tabpanel" id = "section_month"> <p>
Contenu dans TAB3
</p> </div> </div> </div>
Ces codes sont fondamentalement les mêmes que le code natif dans Bootstrap. Vous n'avez pas besoin d'apporter trop de modifications, remplissez simplement vos propres données.
Définissons les styles d'onglets. Ces styles écraseront les styles originaux de bootstrap pour réaliser l'effet de l'embellissement des onglets.
<style type = "text / css">. Tab .nav-tabs {border-bottom: 0 Aucun; arrière-plan: #eaeaa;}. Tab .nav-tabs li a {border: transparent; border-radius: 0; font-size: 16px; border: Aucun; Color: # 333; padding: 12px 22px;}. Tab .nav-tabs li. li.active ai {border: 0 Aucun; fond: # e67e22; couleur: #fff;}. onglet .nav-tabs .nav-tabs li.active a: après {contenu: ""; position: absolu; gauche: 45%; en bas: -14px; bordure: 7px transparent solide; border-top: 7px solide # e67e22;}. 5px; couleur: # 5A5C5D; Font-Size: 14px; ligne-Height: 20px; margin-top: 5px; border-bottom: 1px solide # e67e22;} @ media uniquement screen et (max-width: 480px) {.tab .nav-tabs, .tab .nav-tabs li {width: 100%;}.. .nav-tabs li.active a {border-radius: 10px 10px 0 0;}. tab .nav-tabs li: premier-enfant a {border-bottom-left-radius: 0;}. tab .nav-tabs li a {margin-bottom: 10px; frontière: 1px solidgray;}. Aucun;}} </ style>Après la sortie de l'effet, il ressemble à ceci:
Est-ce mieux que le style original de Bootstrap (mais tout le monde a ses propres préférences. Voici juste une introduction au processus de mise en œuvre. Bien sûr, vous pouvez également créer d'autres styles en modifiant CSS)
Voyons comment implémenter la commutation automatique des onglets. Sans plus tarder, entrez simplement le code:
// Tabs Timer de fonction de rotation automatique (i) {interval = setInterval (function () {$ ("# doctins li: eq (" + i + ") a"). tab ('show'); i ++; if (i> 2) i = 0;}, 5000); retour interval;} $ (function () {var i = 0; intervalle = time Dans la liste de liste.mouseOver (function () {ClearInterval (interval);}); // Continuer la rotation $ (". Tab-Pane"). Mouseout (function () {timer (i);});});Ce qui précède est l'embellissement et l'amélioration du contrôle des onglets dans Bootstrap qui vous est présenté par l'éditeur (recommandé). J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!