Você está usando um navegador desatualizado. Para a visualização correta, atualize seu navegador:

Mapa do site


SimpleUi

Atualizando

Código para Sub aba Download

? - +
Navegação por sub-abas
  1. Pré-requisito
    • Possuir uma estrutura em Abas
  2. Dentro de um conteúdo de uma aba: crie uma lista <ul> e <li>’s, onde cada item da lista será uma sub-aba
    • No <ul> use a class ui_tabsub (gatilho)
    • Em cada <li>, insira links (<a>’s). Nesses links, use o atributo href para identificar o conteúdo que será aberto (veja o próximo item desse tutorial), ex: href="minhaSubAba"
  3. Ao fechar a lista (</ul>), crie uma <div> para cada conteúdo de item da sub-aba.
    • As div’s devem possuir uma classe ui_tabsubContent (gatilho) e um id de acordo com o href da aba de referência (ex: minhaSubAba)
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Se achar necessário, gere o permalink para cada uma das sub-abas:
    • Para isso, insira o atributo data-link="true" na tag <ul>
    • Dessa forma, é possível capturar a URL após clicar em uma sub-aba, seja para compartilhar ou abrir através de um endereço específico
  2. Por padrão, as sub-abas ocupam toda a largura destinada à elas
    • Nesse caso, a largura será dividida uniformemente pelo número de sub-abas presentes. Ou seja, esse número pode não ser inteiro e alguns navegadores antigos não interpretam decimal de pixels. Independente disso, não há malefícios à função
    • Para que as sub-abas não ocupem toda a largura, use em ui_tabsub o atributo data-full="false".
    • Caso queira, o atributo data-align pode definir o alinhamento das sub-abas, através dos valores left (padrão), center e right.
    • Vale lembrar que se data-full="false" for usado, o padding-right e padding-left de li terão efeito sobre as sub-abas. (isso não ocorre quando data-full é igual a true ou vazio)
  1. O espaçamento entre as sub-abas pode ser obtido por meio da propriedade margin. Use margin-left e margin-right no li da sub-aba.
    Dica: Não são obrigatórios, mas lembre-se de :last-child e :first-child para tratar a primeira e a última sub-aba, caso necessário.
Customizar


Quantidade de sub-abas

Mostrar sub-aba(s)

Sub-aba padrão

Abrir inicialmente na ª sub-aba

Layout

As sub-abas ocupar toda a largura. Padrão: Sim (true)
O alinhamento será à(ao) . Padrão: Esquerda (left)

Caminho

Ao clicar na sub-aba, a URL o caminho clicado. Padrâo: não exibir (false) Saiba mais
Os navegadores modernos são capazes de trocar a url em tempo de execução.
Uma vez habilitada, as sub-abas geram links permanentes, facilitando o acesso ao conteúdo.
Habilte essa função e observe a barra de endereço do navegador ao clicar na sub-aba.
Tem certeza que deseja reiniciar todos os valores?

Resultado para Sub aba