Die Registerkarte in Bootstrap ist unter den Entwicklern sehr beliebt für ihre Einfachheit und einfache Benutzung. Sein Stil ist jedoch relativ Single. Wie kann es einen schöneren Effekt erzielen, der auf seiner ursprünglichen Form basiert? Ich habe über dieses Problem nachgedacht. Zusätzlich müssen Registerkarten in Bootstrap auf jede Registerkarte klicken, um das Schalten zu erreichen. Können Sie JQuery verwenden, um den automatischen Schalter zu steuern und nach einer Zeit (z. B. 5 Sekunden) von einer Registerkarte auf eine andere zu wechseln? Das Folgende ist mein Implementierungsprozess, zunächst der HTML -Code des Registerkartenteils:
<div rollen = "tabpanel"> <!-nav tabs-> <ul rollen = "cablist" style = "margin-top: 0px;" id = "doctabs"> <li rollen = "Präsentation"> <a href = "##Section_New" aria-controls = "home" rollen = "tab" data-toggle = "tab"> letzt rollen = "Präsentation"> <a href = "#Section_month" aria-controls = "messages" rollen = "tab" data-toggle = "tab"> in 30 Tagen beliebt </a> </ul> <!-tab Panes-> <div> <div> <div rollen = "tabpanel" id = "Abschnitt_New"> <p>
Inhalt in tab1
</p> </div> <div rollen = "tabpanel" id = "section_week"> <p>
Inhalt in tab2
</p> </div> <div rollen = "tabpanel" id = "section_month"> <p>
Inhalt in Tab3
</p> </div> </div> </div>
Diese Codes entsprechen im Grunde genommen dem nativen Code in Bootstrap. Sie müssen nicht zu viele Änderungen vornehmen, sondern einfach Ihre eigenen Daten ausfüllen.
Setzen wir die Registerkarten. Diese Stile überschreiben die Originalstile in Bootstrap, um die Wirkung von Verschönerungsschreiber zu erzielen.
<style type = "text/css">. tab .nav-tabs {Border-Bottom: 0 Keine; Hintergrund: #eaea;}. tab .nav-tabs li a {border: transparent; border-radius: 0; font-size: 16px; border: none; color: #333; padding: 12px 22px;}. tab. li.active ai {Border: 0 Keine; Hintergrund: #e67e22; Farbe: #fff;}. tab .nav-tabs .nav-tabs li.active a: Nach {Inhalt: ""; 5px; Farbe: #5a5c5d; Schriftgröße: 14px; Linienhöhe: 20px; Rand-Top: 5px; Border-Bottom: 1px Solid #e67e22;}@Media Nur-Bildschirm und (max-Width: 480px) {.nav-tabs. .nav-tabs li.active a {Border-Radius: 10px 10px 0 0; keine;}} </style>Nachdem der Effekt herauskommt, sieht es so aus:
Ist es besser als der ursprüngliche Bootstil (aber jeder hat seine eigenen Vorlieben. Hier ist nur eine Einführung in den Implementierungsprozess. Natürlich können Sie auch andere Stile erstellen, indem Sie CSS ändern)
Schauen wir uns an, wie die automatischen Umschaltung von Registerkarten implementiert werden kann. Geben Sie ohne weiteres den Code ein:
// Registerkarten Automatische Rotationsfunktion Timer (i) {interval = setInterval (function () {$ ("#doctabs li: EQ ("+i+") a"). Tab ('show'); i ++; if (i> 2) i = 0;}, 5000); in der Liste der Liste.MouseOver (function () {ClearInterval (Intervall);}); // Fortsetzung der Rotation $ (". Tab-Pane"). Mouseout (function () {Timer (i);});});Das obige ist die Verschönerung und Verbesserung der Registerkarte in Bootstrap, die Ihnen vom Editor vorgestellt wurde (empfohlen). Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!