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.

Video: Ajax Framework Tutorial javascript Module Programming PHP Script Included

Em uma interface com abas, apenas um elemento é visível de cada vez, mas as abas são todas 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 alterar o estado (normalmente mudando a cor) para indicar que eles estão sendo pairado sobre. Quando você clicar em outra guia, a principal área de conteúdo 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 guia é 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
Video: CSS3 Flip 3D Animation For Boxes and Cards HTML5 Tutorial
Livro III - Usando CSS posicional para o layout
Diversão com o Float Fabulous
Construção Floating layouts de página
Listas de styling 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 o tema de fundo gráficos.

2. Construir HTML como normal.

   
   
   
   

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

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

   Video: Responsive Navbar Tutorial - HTML5, CSS3, & Jquery

   Este é o elemento que você vai fazer 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 um div com um ID descritivo. Cada um destes divs deve ser colocado no aba div.

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

   Construir 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 um nisso() função como habitualmente.

   Use as técnicas normais jQuery.

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

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