Como trabalhar com Tabs em CSS3

Muitos desenvolvedores usar interfaces com guias para reduzir a complexidade da aplicação. Se você pode chamar a atenção do usuário em um item de cada vez, você reduzir o potencial de entrada errante. Neste exemplo CSS3, você começa com uma chamada de função simples. (Você pode encontrar o código completo para este exemplo no Chapter pasta 06 Widgets do código para download como Tabs.HTML).

$ (Function () {$ ( "# configuração") guias () -.}) -

O truque para este exemplo está nas tags HTML, assim como foi para o exemplo Widget de acordeão. Existem algumas diferenças importantes na forma como você cria as duas páginas para obter a aparência desejada, como mostrado no seguinte código:

Note-se que o

elementos são ido neste caso. Em vez de usar títulos para definir a distância entre elementos, você fornece uma lista não ordenada (
    ) ao invés. A lista deve conter a href a cada um dos
    elementos na página. Não há qualquer diferença no conteúdo da página. Você também precisa fornecer algum CSS para formatar o controle conforme mostrado.

Neste caso, o estilo #configuration define o tamanho global da interface com abas e o facto de que as abas têm-se centrado texto. A div #configuration muda o alinhamento do conteúdo para a esquerda.

image0.jpg

Para fazer uma mudança, você clique na guia que contém as informações que você quer ver. Você faz mudanças como normal. Ao clicar no botão Configuration Change envia as alterações para o servidor. Se você testar este exemplo, utilizando o mesmo processo que você fez para o exemplo acordeão, você começa precisamente os mesmos resultados - apenas a aparência da interface mudou.

Semelhante

menu