I div ti consentono di raggruppare elementi in una pagina Web. Esistono due modi per far scomparire i div in una pagina Web. Innanzitutto, un codice trasforma un div in un elemento invisibile, oppure puoi usare il collasso. Se rendi semplicemente invisibile un div, rimane uno spazio vuoto dove esiste il div. La compressione di un div rimuove lo spazio vuoto senza lasciare "buchi" nella tua pagina Web. Utilizzando JavaScript collegato a un pulsante, crei i tuoi div che si comprimono ed espandono quando gli utenti fanno clic sul pulsante.
Aggiungi div alla pagina Web
Passaggio 1
Avvia Blocco note e apri uno qualsiasi dei tuoi documenti HTML.
Passaggio 2
Aggiungi questo blocco di codice HTML alla sezione "body" del documento:
Testo div
Questo codice crea un div e un pulsante. Il div contiene un paragrafo con testo che recita: "Div text". Sostituisci quel testo con quello che ti piace. Il "pulsante" chiama una funzione JavaScript quando viene cliccato. Tale funzione fa in modo che il div passi tra uno stato compresso e uno stato espanso.
Individua le proprietà "id" e "class" nel tag div. Per creare un div in espansione e compressione, è necessario assegnare al div un valore id. In questo esempio, quel valore è "MyDiv". Il div ha anche una proprietà di classe. In questo caso, il valore di quella proprietà è "divVisible". Questo è il nome di una classe CSS definita nella sezione successiva.
Aggiungi classi CSS e JavaScript
Passaggio 1
Aggiungi il seguente codice CSS alla sezione "head" del documento: Questa crea la classe "divVisible" e un'altra classe denominata "divHidden". La classe "divVisible" imposta il suo valore di visualizzazione su "blocco". Il valore "blocco" rende visibile qualsiasi elemento HTML che fa riferimento alla classe e la espande per occupare spazio nella pagina Web. La classe "divHidden" imposta il suo valore di visualizzazione su "none". Qualsiasi elemento HTML che fa riferimento a quella classe collassa e non lascia spazio.
Passaggio 2
Aggiungi questo codice JavaScript sotto il codice CSS: La variabile divID contiene il valore ID del div che desideri comprimere ed espandere. Quel valore è "MyDiv". Il resto del codice ottiene l'attuale nome della classe CSS del div e lo cambia ogni volta che il codice viene eseguito. La prima volta che il codice viene eseguito, cambia il nome della classe del div in "divHidden". La seconda volta che viene eseguito, cambia il nome della classe in "divVisible".
Passaggio 3
Salvare il documento HTML e aprirlo nel browser. Viene visualizzato il paragrafo che contiene il paragrafo.
Fai clic sul pulsante "Comprimi /Espandi". Il testo collassa. Fare di nuovo clic sul pulsante per espandere il testo. Nota come il pulsante e altri elementi sotto il testo si spostano verso l'alto quando il testo viene compresso e verso il basso quando il testo si espande.
Computer © www.354353.com