Crie uma lista <ul> e <li>’s, onde cada item da lista será uma aba
No <ul> use a class ui_tab
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="minhaAba"
Ao fechar a lista (</ul>), crie uma <div> para cada conteúdo de item da aba.
As div’s devem possuir uma classeui_tabContent e um id de acordo com o href da aba de referência (ex: minhaAba)
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
Se achar necessário, gere o permalink para cada uma das abas:
Para isso, insira o atributo data-link="true" na tag <ul>. Dessa forma, é possível capturar a URL após clicar em uma 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.
Já o nome de cada aba será o próprio id de cada li filho de ui_tab.
Por padrão, as abas ocupam toda a largura destinada à elas
Nesse caso, a largura será dividida uniformemente pelo número de 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 abas não ocupem toda a largura, use em ui_tab o atributo data-full="false", onde cada aba terá a largura fluida de acordo com o respectivo conteúdo; ou data-full="equal", onde a largura das abas serão iguais, determinada pelo tamanho da maior.
Caso queira, o atributo data-align pode definir o alinhamento das 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 abas. (isso não ocorre quando data-full é igual a true ou vazio)
O espaçamento entre as abas pode ser obtido por meio da propriedade margin. Use margin-left e margin-right no li da aba.
Dica: Não são obrigatórios, mas lembre-se de :last-child e :first-child para tratar a primeira e a última 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 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.