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.
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"
Ao fechar a lista (</ul>), crie uma <div> para cada conteúdo de item da sub-aba.
As div’s devem possuir uma classeui_tabsubContent 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:
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.
Caso queira, altere o nome do parâmetro por meio do atributo data-link-name e informe o valor desejado no ul.
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", onde cada sub-aba terá a largura fluida de acordo com o respectivo conteúdo; ou data-full="equal", onde a largura das sub-abas serão iguais, determinada pelo tamanho da maior.
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" ou data-full="equal" 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)
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.
Também é possível manter a borda abaixo das abas. Para isso, use o atributo data-keep-border-bottom="true" na lista </ul>.
Após o clique nas abas, usuários avançados podem implementar uma função do tipo callback
Para isso, crie a função callback_tab(obj) e implemente as ações que irão ocorrer após o clique em uma das sub-abas, onde obj é objeto (<li>) clicado.
Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.