Nwlapcug.com


Come creare sezioni espandibili all'interno di una pagina Web

Come creare sezioni espandibili all'interno di una pagina Web


Nelle sezioni espandibili, spesso appaiono sulle pagine Web come menu o frammenti di blog. Queste sezioni espandibile possono essere create utilizzando JavaScript e CSS Proprietà. Con una poca conoscenza HTML, è possibile creare sezioni espandibili all'interno di una pagina Web.

Istruzioni

1

Racchiudere la sezione che si desidera espandere nel tag < div >. Inserire un tag < div > prima della zona espandibile e un < / div > tag alla fine della zona. I tag < div > sono simili a < html > e < body > Tag. Essi dividono un documento HTML in sezioni, ma non aggiungere formattazione.

2

Dare il tuo < div > un ID e uno stile. Modificare il tag di apertura < div > per < div id = "espandibile" style = "overflow: nascosto; visualizzare: none;" >. Questo stile nasconde o comprime i contenuti per impostazione predefinita. Troppopieno e il display sono le proprietà di stile. La proprietà overflow è impostata su hidden per nascondere qualsiasi contenuto maggiore dimensione di area di contenuto. La proprietà display è impostata su none per impedire la visualizzazione in un browser Web di contenuto all'interno dei tag < div >.

3

Immettere quanto segue appena prima il < / div > tag:

< un href="javascript:Tog('none')" > meno < /a >.

Questa riga rende il tuo crollo contenuto se è stato ampliato. In particolare, chiama una funzione JavaScript, insieme a dir. Questa chiamata a dir dinamicamente imposta la proprietà display su none.

4

Immettere quanto segue subito dopo il < / div > tag:

< un href="javascript:Tog('block')" > informazioni </a >.

Questa linea fa Espandi il tuo contenuto. La chiamata al Tog dinamicamente imposta la proprietà display per bloccare. Impostazione della visualizzazione per bloccare rende il contenuto vengono visualizzati con le interruzioni di riga sopra e sotto di esso.

5

Immettere quanto segue all'interno dei tag < head > del documento HTML di cui verrà visualizzato il contenuto espandibile per iniziare la sezione di JavaScript:

< script language = "JavaScript" type = "text/javascript" >

6

Digitare il comando seguente per definire la funzione dir che è chiamata dalla sezione espandibile:

<!-funzione Tog(x)

La 'x' all'interno del Tog(x) è una variabile fittizia che assume il valore della proprietà da applicare alla sezione.

7

Digitare quanto segue:

{var espandibile = document.getElementById('expandable');

Il getElementById determina che la sezione la funzione colpisce. In questo caso, è il < div > con un ID di espandibile.

8

Digitare il comando seguente per impostare le proprietà di visualizzazione della sezione per il valore di x:

expandable.Style.display = x} / / -->

9

Digitare quanto segue per terminare la sezione di JavaScript:

< / script >