El control de pestañas en Bootstrap es muy popular entre los desarrolladores por su simplicidad y facilidad de uso. Sin embargo, su estilo es relativamente único, ¿cómo puede lograr un efecto más hermoso basado en su forma original? He estado considerando este problema. Además, las pestañas en Bootstrap deben hacer clic en cada pestaña para lograr la conmutación. ¿Puede usar jQuery para controlar su conmutación automática y dejar que cambie de una pestaña a otra después de un período de tiempo (como 5 segundos)? El siguiente es mi proceso de implementación, en primer lugar, el código HTML de la parte de pestañas:
<div role = "TabPanel"> <!-NAV Tabs-> <UL Role = "Tablist" style = "Margin-top: 0px;" id = "Doctabs"> <li role = "Presentation"> <a href = "#section_new" aria-confontrols = "home" role = "tab" data-toggle = "tab"> Último </a> <li role = "presentación"> <a href = "#section_week" aria-controls = "perfil" rol = "tab" data-toggle = "Tabgle =" Tabgle = "Popular in 7 Days in 7 Days in 7 Days in 7 Days in 7 Days in. rol = "Presentation"> <a href = "#section_month" aria-confontrols = "mensajes" rol = "tab" data-toggle = "tab"> popular en 30 días </a> </ul> <!-Tab Panes-> <div> <Div Role = "Tabpanel" Id = "Section_new"> <p> <p>
Contenido en TAB1
</p> </iv> <div role = "tabpanel" id = "section_week"> <p>
Contenido en TAB2
</p> </div> <div role = "tabpanel" id = "section_month"> <p>
Contenido en TAB3
</p> </div> </div> </div>
Estos códigos son básicamente los mismos que el código nativo en Bootstrap. No necesita hacer demasiados cambios, solo complete sus propios datos.
Establezcamos los estilos de pestañas. Estos estilos sobrescribirán los estilos originales en Bootstrap para lograr el efecto de embellecer las pestañas.
<style type = "text/css">. tab .nav-tabs {border-bottom: 0 none; fondos: #eaeaea;}. tab .nav-tabs li a {border: transparent; border-radius: 0; font-size: 16px; border: no; color: #333; payding: 12px 22px;}. Tab .nav-tabs li.Act. .nav-tabs li.active ai {border: 0 ninguno; fondo: #e67e22; color: #fff;}. tab .nav-tabs .nav-tabs li.active a: después de {content: ""; posición: absoluto; izquierda: 45%; fondo: -14px; borde: 7px sólido transparente; border-top: 7px sólido sólido #e672222;}.}. .tab-content {Padding: 5px; color: #5a5c5d; font-size: 14px; line-height: 20px; margin-top: 5px; border-bottom: 1px sólido #e67e22;}@solo pantalla de medios y (max-width: 480px) {.tab .nav-tabs, .tab. 100%; fondo: transparente;}. Tab .nav-tabs li.active a {border-radio: 10px 10px 0 0 0;}. Tab .nav-tabs li: primer hijo a {border-bottom-left-rads: 0;}. Tab .nav-tabs li a {margen-bottom: 10px; borde: 1px sólido sólido;}.}.}. A: After {border: none;}} </style>Después de que sale el efecto, se ve así:
¿Es mejor que el estilo original de Bootstrap (pero todos tienen sus propias preferencias? Aquí hay solo una introducción al proceso de implementación. Por supuesto, también puede hacer otros estilos modificando CSS)
Echemos un vistazo a cómo implementar el cambio automático de pestañas. Sin más ADO, solo ingrese el código:
// Tabs Temperador de función de rotación automática (i) {interval = setInterval (function () {$ ("#doctabs li: eq ("+i+") a"). tab ('show'); i ++; if (i> 2) i = 0;}, 5000); returación de retorno;} $ (function () {var i = 0; interval = tiempo (i); en la lista de área.MouseOver (function () {ClearInterval (intervalo);}); // Continuar con rotación $ (". Tab-pane"). MouseOut (function () {Timer (i);});});Lo anterior es el embellecimiento y la mejora del control de pestañas en Bootstrap introducido por el editor (recomendado). Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!