O controle de guias no bootstrap é muito popular entre os desenvolvedores por sua simplicidade e facilidade de uso. No entanto, seu estilo é relativamente único, como pode obter um efeito mais bonito com base em sua forma original? Eu tenho considerado esse problema. Além disso, as guias no Bootstrap devem clicar em cada guia para obter a comutação. Você pode usar o jQuery para controlar sua comutação automática e deixá -la mudar de uma guia para outra após um período de tempo (como 5 segundos)? A seguir, é apresentado o meu processo de implementação, antes de tudo, o código HTML da parte da guia:
<div role = "TabPanel"> <!-NAV TABS-> <UL RUPE = "Table" style = "margin-top: 0px;" id="docTabs"><li role="presentation"><a href="#Section_new"aria-controls="home" role="tab" data-toggle="tab"> Latest</a><li role="presentation"><a href="#Section_week"aria-controls="profile" role="tab" data-toggle="tab"> Popular in 7 days</a><li Role = "Apresentação"> <a href = "#Section_month" ARIA-CONTROLS = "Mensagens" Role = "Tab" Data-Toggle = "Tab"> Popular em 30 dias </a> </ul> <!-Tab painéis-> <div> <div Role = "TabPanel" Id = "Section_New"> <P>
Conteúdo no TAB1
</p> </div> <div role = "TabPanel" id = "Section_week"> <p>
Conteúdo no TAB2
</p> </div> <div role = "TabPanel" id = "Section_month"> <p>
Conteúdo no TAB3
</p> </div> </div> </div>
Esses códigos são basicamente os mesmos do código nativo no bootstrap. Você não precisa fazer muitas alterações, basta preencher seus próprios dados.
Vamos definir os estilos de guias. Esses estilos substituirão os estilos originais no bootstrap para alcançar o efeito de embelezar as guias.
<style type = "text/css">. TAB .NAV-TABS {borda-bottom: 0 Nenhum; Background: #eeaea;}. Tab .nav-tabs li a {borda: transparent; borda-radius: 0; li.active ai {borda: 0 nenhum; fundo: #e67e22; cor: #fff;}. tab .nav-tabs .nav-tabs li.active a: após {content: ""; posição: absoluto; esquerda: 45%; inferior: -14px; borda: 7px Solid transparent; border-top: 7px Solid Solid. 5px; cor: #5a5c5d; tamanho da fonte: 14px; altura da linha: 20px; margem-top: 5px; fundo de borda: 1px Solid #e67e22;}@sólida de mídia; .nav-tabs li.active a {-radius de borda: 10px 10px 0 0;}. TAB .NAV-TABS Li: Primeira filho a {borda-borda-left-radius: 0;}. Tab. Nenhum;}} </style>Depois que o efeito é lançado, parece o seguinte:
É melhor que o estilo original de bootstrap (mas todo mundo tem suas próprias preferências. Aqui está apenas uma introdução ao processo de implementação. É claro que você também pode fazer outros estilos modificando CSS)
Vamos dar uma olhada em como implementar a troca automática de guias. Sem mais delongas, basta inserir o código:
// guias Timer de função de rotação automática (i) {interval = setInterval (function () {$ ("#doctabs li: eq ("+i+") a"). tab ('show'); i ++; if (i> 2) i = 0;}, 5000); Passando na área da lista.MouseOver (function () {ClearInterval (intervalo);}); // Continue a rotação $ (".O exposto acima é o embelezamento e a melhoria do controle de guias no bootstrap introduzido pelo editor (recomendado). Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!