October 2
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.
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>