HTML dinâmico (DHTML) permite que você crie uma experiência de estilo de aplicativo em seus sites, reduzindo a frequência com que páginas inteiras precisam ser totalmente carregadas. Em aplicativos, quando você clica em algo, o aplicativo muda imediatamente para mostrar aquele conteúdo específico ou para fornecer sua resposta.
Em contraste, as páginas da web normalmente precisam ser recarregadas ou uma página inteiramente nova precisa ser carregada. Isso pode tornar a experiência do usuário mais desconexa. Seus clientes precisam aguardar o carregamento da primeira página e, em seguida, aguardar novamente o carregamento da segunda página, e assim por diante.
Usando para melhorar a experiência do visualizador
Usando DHTML, uma das maneiras mais fáceis de melhorar essa experiência é ter div os elementos são ativados e desativados para exibir o conteúdo quando solicitado. UMA elemento div define divisões lógicas em sua página da web. Pense em um div como uma caixa que pode conter parágrafos, cabeçalhos, links, imagens e até outros divs.
O que você precisará
Para criar um div que possa ser ativado e desativado, você precisa do seguinte:
- Um link para controlar o div, ativando-o e desativando-o quando clicado.
- O div para mostrar e ocultar.
- CSS para estilizar o div oculto ou visível.
- JavaScript para executar a ação.
O link de controle
O link de controle é a parte mais fácil. Basta criar um link como faria para outra página. Por enquanto, deixe o atributo href em branco.
Aprenda HTML
Coloque-o em qualquer lugar da sua página da web.
O Div para mostrar e ocultar
Crie o elemento div que deseja mostrar e ocultar. Certifique-se de que seu div tem um ID exclusivo. No exemplo, o id único é aprender HTML.
Esta é a coluna de conteúdo. Ele começa em branco, exceto por este texto explicativo. Escolha o que você deseja aprender na coluna de navegação à esquerda. O texto aparecerá abaixo:
Aprenda HTML
- Aula HTML grátis
- Tutorial de HTML
- O que é XHTML?
O CSS para mostrar e ocultar o Div
Crie duas classes para o seu CSS: uma para ocultar o div e outra para mostrá-lo. Você tem duas opções para isso: exibição e visibilidade.
A exibição remove o div do fluxo da página e a visibilidade apenas altera a forma como ele é visto. Alguns programadores preferem exibição, mas as vezes visibilidade também faz sentido. Por exemplo:
.hidden {display: none; }
.unhidden {display: block; }
Se você quiser usar a visibilidade, altere essas classes para:
. oculto {visibilidade: oculto; }
.unhidden {visibilidade: visível; }
Adicione a classe oculta ao seu div para que comece oculto na página:
JavaScript para fazer funcionar
Tudo o que esse script faz é olhar para a classe atual definida em seu div e alterná-la para não oculta se estiver marcada como oculta ou vice-versa.
Estas são apenas algumas linhas de JavaScript. Coloque o seguinte na cabeça de seu Documento HTML (antes de o.
O que este script faz, linha por linha:
Chama a função revelar, e divID é o ID exclusivo exato que você deseja mostrar ou ocultar.
Define uma variável item com o valor do seu div.
Executa uma verificação simples do navegador; se o navegador não suportar getElementById, este script não funcionará.
Verifica a classe no div. Se é escondido, muda para revelado. Caso contrário, muda para escondido.
Fecha o E se demonstração.
Fecha a função.
Para fazer o script funcionar, você precisa fazer mais uma coisa. Volte para o seu link e adicione o javascript ao atributo href. Certifique-se de usar o ID exclusivo exato que você nomeou seu div neste href:
Aprenda HTML
Parabéns! Agora você tem uma div que será exibida e ocultada sempre que você clicar em um link.
Possíveis problemas a serem observados
Este script não é à prova de idiotas. Existem algumas situações em que isso pode causar problemas para você:
JavaScript não ativado. Se seus leitores não tiverem JavaScript ou ele estiver desligado, este script não funcionará. Os divs ocultos permanecem ocultos, não importa o que seus leitores façam. Uma maneira de corrigir isso é colocar os divs ocultos em uma área noscript, mas você terá que brincar com isso para que sejam exibidos corretamente.
Muito conteúdo. Essa pode ser uma ótima ferramenta para permitir que seus leitores vejam apenas o conteúdo de que precisam, mas se você colocar muito dentro dos divs ocultos, isso pode afetar drasticamente o carregamento da página. Lembre-se de que, embora o conteúdo não esteja sendo exibido, o navegador da web ainda está baixando-o, portanto, use o bom senso na quantidade de conteúdo que você oculta.
Os clientes não entendem. Finalmente, os clientes podem não estar acostumados a clicar em um link que mostra ou oculta conteúdo. Brinque com ícones (sinais de adição e setas funcionam bem) ou texto para explicar o que acontecerá com seus clientes. Outra solução é deixar um dos divs aberto enquanto os outros estão fechados. Isso pode transmitir a ideia aos seus clientes, para que eles possam descobrir mais rapidamente como abrir o conteúdo restante.
Você deve sempre testar o HTML dinâmico dessa forma com seus clientes. Depois que você tiver certeza de que eles podem entender e usar, essa pode ser uma ótima maneira de colocar uma grande quantidade de conteúdo em suas páginas da web sem ocupar muito espaço visível.