Posizionare blocchi di testo nascosti migliora la percezione visiva di una pagina del sito Web: viene caricata nel browser esattamente come l'ha progettata il designer, indipendentemente dalla quantità di informazioni pubblicate. Inoltre, è più conveniente per il visitatore: alla ricerca del blocco di informazioni necessario, non deve guardare attraverso l'intero array, ma solo piccole "punte degli iceberg".
È necessario
Conoscenza di base di HTML e JavaScript
Istruzioni
Passo 1
Utilizza una funzione JavaScript personalizzata per nascondere e visualizzare i blocchi di testo desiderati in una pagina HTML. Una funzione comune per tutti i blocchi è molto più conveniente che aggiungere codice a ciascuno di essi separatamente. Nella parte dell'intestazione del codice sorgente della pagina, inserisci i tag script di apertura e chiusura e tra di essi crea una funzione vuota con un nome, ad esempio, swap e un parametro di input richiesto id: function swap (id) {}
Passo 2
Aggiungi due righe di codice JavaScript al corpo della funzione, tra le parentesi graffe. La prima riga dovrebbe leggere lo stato corrente del blocco di testo, indipendentemente dal fatto che la sua visibilità sia attivata o disattivata. Ci possono essere diversi blocchi di questo tipo in un documento, quindi ognuno deve avere il proprio identificatore: è la sua funzione che riceve id come unico parametro di input. Utilizzando questo identificatore, ricerca il blocco necessario nel documento, assegnando il valore di visibilità/invisibilità (lo stato della proprietà display) alla variabile sDisplay: sDisplay = document.getElementById (id).style.display;
Passaggio 3
La seconda riga dovrebbe cambiare la proprietà di visualizzazione del blocco di testo desiderato al contrario: nascondi se il testo è visibile e mostra se è nascosto. Questo può essere fatto con il seguente codice: document.getElementById (id).style.display = sDisplay == 'none'? '': 'nessuno';
Passaggio 4
Aggiungi il seguente foglio di stile alla sezione dell'intestazione: a {cursor: pointer} Ti servirà per visualizzare correttamente il puntatore del mouse quando passi con il mouse su un tag di collegamento incompleto. Con l'aiuto di tali collegamenti, organizzi nella pagina la visibilità / invisibilità dei blocchi di testo.
Passaggio 5
Posiziona questi collegamenti nel testo prima di ogni blocco nascosto e nei blocchi alla fine del testo aggiungi un collegamento simile. Racchiudere il testo invisibile nei tag span che hanno l'invisibilità impostata negli attributi di stile. Ad esempio: Espandi testo +++ Questo è testo nascosto --- In questo esempio, facendo clic su un collegamento tre più si richiamerà la funzione precedente sull'evento onClick, passandogli l'ID del blocco da rendere visibile. E all'interno del blocco c'è un collegamento di tre svantaggi con le stesse funzioni: facendo clic su di esso si nasconderà il testo.
Passaggio 6
Creare il numero richiesto di blocchi di testo, simile a quello descritto nel passaggio precedente, ricordandosi di modificare gli ID nell'attributo id del tag span e nella variabile passata alla funzione dall'evento onClick nei due link.
