Come creare sezioni espandibili all'interno di una pagina Web

October 2

Come creare sezioni espandibili all'interno di una pagina Web


sezioni espandibili appaiono spesso nelle pagine Web come i menu o frammenti di blog. Queste sezioni espandibili possono essere creati utilizzando JavaScript e proprietà CSS. Con un po 'di conoscenza HTML, è possibile creare sezioni espandibili all'interno di una pagina Web.

istruzione

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

2 Lascia la tua <div> un ID e uno stile. Cambia la tua apertura <div> tag <div id = "espandibile" style = "overflow: hidden; display: none;">. Questo stile si nasconde o crolla sul suo sito web per impostazione predefinita. Overflow e visualizzazione sono le proprietà di stile. La proprietà overflow è impostato su nascosto per nascondere qualsiasi contenuto più grandi dimensioni del contenuto. La proprietà display è impostato a nessuno per evitare che i contenuti all'interno dei tag <div> venga visualizzato in un browser Web.

3 Immettere la seguente appena prima del tag </ div>:

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

Questa linea rende il crollo contenuto se è stato ampliato. In particolare, si richiama una funzione JavaScript, Tog. Questa chiamata a Tog imposta dinamicamente la proprietà di visualizzazione a nessuno.

4 Inserire il seguente subito dopo il tag </ div>:

<a href="javascript:Tog('block')"> Più </a>.

Questa linea rende il vostro tenore di espandersi. Questa chiamata a Tog imposta dinamicamente la proprietà di visualizzazione per bloccare. Impostare il display per bloccare rende il contenuto visualizzato con interruzioni di riga sopra e sotto di essa.

5 Inserire il seguente all'interno del <head> tag del documento HTML in cui il contenuto espandibile appariranno per iniziare il tratto di JavaScript:

<Script language = tipo "JavaScript" = "text / javascript">

6 Digitare quanto segue per definire la funzione Tog che viene chiamato dalla sezione espandibile:

<! - Funzione Tog (x)

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

7 Digitare quanto segue:

{Var espandibile = document.getElementById ( 'espandibile');

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

8 Digitare quanto segue per impostare la proprietà di visualizzazione della sezione per il valore di x:

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

9 Digitare quanto segue per terminare il tratto di JavaScript:

</ Script>