Colocar blocos de texto ocultos melhora a percepção visual da página de um site - ela é carregada no navegador exatamente como o designer o projetou, independentemente da quantidade de informações postadas. Além disso, é mais conveniente para o visitante - em busca do bloco de informações necessário, ele não precisa olhar por todo o conjunto, mas apenas por pequenas "pontas dos icebergs".
É necessário
Conhecimentos básicos de HTML e JavaScript
Instruções
Passo 1
Use uma função JavaScript personalizada para ocultar e exibir os blocos de texto desejados em uma página HTML. Uma função comum para todos os blocos é muito mais conveniente do que adicionar código a cada um deles separadamente. Na parte do cabeçalho do código-fonte da página, coloque as tags de script de abertura e fechamento e, entre elas, crie uma função vazia com um nome, por exemplo, swap e um id de parâmetro de entrada obrigatório: function swap (id) {}
Passo 2
Adicione duas linhas de código JavaScript ao corpo da função, entre as chaves. A primeira linha deve ler o estado atual do bloco de texto - se sua visibilidade está ligada ou desligada. Pode haver vários desses blocos em um documento, portanto, cada um deve ter seu próprio identificador - é sua função que recebe id como o único parâmetro de entrada. Usando este identificador, ele procura o bloco necessário no documento, atribuindo o valor de visibilidade / invisibilidade (o estado da propriedade display) à variável sDisplay: sDisplay = document.getElementById (id).style.display;
etapa 3
A segunda linha deve alterar a propriedade de exibição do bloco de texto desejado para o oposto - ocultar se o texto estiver visível e mostrar se estiver oculto. Isso pode ser feito com o seguinte código: document.getElementById (id).style.display = sDisplay == 'none'? '': 'Nenhum';
Passo 4
Adicione a seguinte folha de estilo à seção de cabeçalho: a {cursor: ponteiro} Você precisará disso para exibir o ponteiro do mouse corretamente ao passar o mouse sobre uma tag de link incompleta. Com a ajuda de tais links, você organiza na página e alterna a visibilidade / invisibilidade dos blocos de texto.
Etapa 5
Coloque esses links de alternância no texto antes de cada bloco oculto e, nos blocos no final do texto, adicione um link semelhante. Envolva o texto invisível em tags span que tenham invisibilidade definida em seus atributos de estilo. Por exemplo: Expand text +++ Este é um texto oculto --- Neste exemplo, clicar em um link de três mais irá chamar a função acima no evento onClick, passando-lhe o ID do bloco a ser tornado visível. E dentro do bloco há um link de três sinais de menos com as mesmas funções - clicar nele irá ocultar o texto.
Etapa 6
Crie a quantidade necessária de blocos de texto, semelhante ao descrito na etapa anterior, lembrando de alterar os IDs no atributo id da tag span e na variável passada à função pelo evento onClick nos dois links.
