Uma técnica importante no desenvolvimento web HTML5 e CSS3 é o uso de uma interface com abas em AJAX. Isto permite ao utilizador alterar o conteúdo de um segmento, seleccionando uma de uma série de abas.

Em uma interface com abas, apenas um elemento é visível de cada vez, mas os guias são visíveis. A interface com abas é um pouco mais previsível do que o acordeão porque as abas (ao contrário dos cabeçalhos do acordeão) ficar no mesmo lugar.

As guias mudam de cor para indicar qual guia está marcado, e eles também mudam de estado (normalmente mudando a cor) para indicar que eles estão sendo pairado sobre. Quando você clicar em outra guia, a área de conteúdos do widget é substituído com o conteúdo correspondente.

Isto é o que acontece quando o usuário clica na guia.

Tal como o acordeão, o efeito separador é incrivelmente fácil de alcançar. Olhar sobre o código:

 
tab Demonstração
livro 1
livro 2
livro 3
Livro I - Criação da Fundação HTML
Fundações HTML som
É toda sobre Validação
Escolhendo suas Ferramentas
Gestão da Informação com listas e tabelas
Fazendo conexões com links
adicionando imagens
Criação de formulários
Livro II - Styling com CSS
Colorir o mundo
styling Texto
Seletores, classe e estilo
Borders and Backgrounds
Níveis de CSS
Livro III - Usando CSS posicional para layout
Diversão com o Float Fabulous
Construção Floating Layouts de página
As listas de estilo e menus
Usando Posicionamento alternativa

O mecanismo para a construção de uma interface baseada separador é muito semelhante ao de acordeão:

1. Adicione todos os arquivos apropriados.

   Como a maioria dos efeitos jQuery UI, você precisa jQuery, jQuery UI, e um arquivo de tema CSS. Você também precisa de acesso ao imagens diretório para do tema gráficos de fundo.

2. Criar HTML como normal.

   Se você está construindo uma página web bem organizada de qualquer maneira, você já está bem perto.

3. Criar uma div que contém todos os dados tabulados.

   Este é o elemento que você estará fazendo a mágica jQuery diante.

4. Coloque principais áreas de conteúdo em divs nomeados.

   Cada parte do conteúdo que será exibido como uma página deve ser colocado em uma div com um ID descritivo. Cada um destes divs deve ser colocado na aba div.

5. Adicionar uma lista de links locais para o conteúdo.

   Criar um menu de links. Coloque isso no topo da div com abas. Cada link deve ser uma ligação local para um dos divs. Por exemplo, o índice parece com isso:

6. livro 1
7. livro 2
8. livro 3

9. construir uma nisso() função como habitualmente.

   Use as técnicas normais jQuery.

10. Ligar para tabs () método no div principal.

    Incrivelmente, uma linha de código jQuery faz todo o trabalho.