April 4
tag di ancoraggio, JavaScript e CSS possono aiutarvi ad aggiungere dall'aspetto professionale in espansione sezioni alle pagine Web. Potreste aver visto questo effetto mentre si fa clic su un pulsante o un link su un sito web. Facendo clic su una sezione espandibile induce a visualizzare contenuti aggiuntivi. Imparare a creare questo effetto ti dà la possibilità di inserire grandi quantità di contenuti in una piccola quantità di spazio Web.
1 Creare un nuovo documento HTML utilizzando il blocco note o un editor HTML.
2 Incollare il seguente codice nella sezione del documento "<body>":
<Div>
<a href="#" onclick="return manageSection('section1')"> Sezione Titolo 1 </a>
<Div id = classe "sezione1" = "crollato">
contenuti espansi della sezione 1
</ Div>
</ Div>
Questo codice HTML crea una linea di testo di ancoraggio che dice "Titolo della sezione 1." Ha un evento onclick che chiama una funzione JavaScript denominato "manageSection" quando si fa clic. Si noti il tag "div" di sotto di tale titolo di sezione. Si fa riferimento a una classe CSS chiamato "crollato". Quella classe mantiene il div e il suo contenuto nascosto fino JavaScript rende tali contenuti visibile. Si noti che la chiamata al "manageSection" JavaScript funzione passa l'id del div crollata. Questo id è "sezione1." La funzione ha bisogno che il valore per determinare quale div di espandersi.
3 Incollare il codice seguente dopo il codice descritto nel passaggio precedente:
<Div>
<a href="#" onclick="return manageSection('section2')"> Sezione Titolo 2 </a>
<Div id = classe "sezione2" = "crollato">
contenuti espansi della sezione 2
</ Div>
</ Div>
Questo crea un'altra riga di testo di ancoraggio che si legge, "Sezione rubrica 2." L'evento onclick chiama la stessa funzione JavaScript e passa la sezione "2" per la funzione.
4 Individuare sezione <head> del documento, e aggiungere il seguente codice CSS per quella sezione:
<Style type = "text / css">
.expanded {display: block;}
.collapsed {display: none;}
</ Style>
Questo crea la classe "espanso" che rende un elemento visibile e la classe "crollata", che lo nasconde.
5 Incollare il seguente codice JavaScript dopo il codice CSS indicato nel passaggio precedente:
Funzione manageSection (Idsezione) {
sezione var = document.getElementById (Idsezione);
if (section.className == "crollata")
section.className = "expanded";
altro
section.className = "crollato";
return true;
}
Questo codice viene eseguito quando gli utenti fanno clic su una delle intestazioni sezione della pagina Web. Ogni volta che un utente fa clic su un titolo, questo codice alterna classe CSS del div nascosti tra "espanso" e "crollato". Questo dà l'illusione che le sezioni sono apertura e chiusura.
6 Salvare il documento HTML e aprirlo in un browser. Il browser visualizza i due titoli delle sezioni visibili denominato "Sezione Titolo 1" e "Sezione rubrica 2."
7 Fai clic su queste voci. Il browser li espande per rivelare i contenuti aggiuntivi all'interno delle sezioni. Fare clic di nuovo le sezioni a crollare loro.