Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos
a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais,
Dicas, etc.
Tutoriais JQuery - 15
Tutorial para Criar Conteúdos com Guias
Nesse tutorial vamos mostrar como criar conteúdo utilizando abas ou guias.
Uma única área de conteúdo com vários painéis, cada um associado a um cabeçalho em uma lista.
Exemplo 1:
Nesse exemplo vamos criar conteúdo padrão com apenas três guias. Clique nas guias para alternar entre o conteúdo dividido
em seções lógicas.:
Resultado:
Veja na imagem o resultado desse código:
Exemplo 2:
Esse exemplo funciona da mesma forma que o anterior, só que você não precisa clicar na aba para acessar o conteúdo, basta
passar o cursor sobre a mesma.
Alterne seções abertas/fechadas ao passar o mouse com a opção de evento. O valor padrão para o evento é "clique".
Resultado:
Veja na imagem o resultado desse código:
Exemplo 3:
Nesse exemplo você vai poder criar novas guias, criar o título e o seu respectivo conteúdo utilizando o botão 'Criar Guia'. Também poderá remover qualquer
guia clicando no 'x' à direita da guia. O conteúdo pode ser copiado de qualquer fonte e colado no conteúdo da guia.
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris.
Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
Vivamus sed magna quis ligula eleifend adipiscing.
