Nwlapcug.com


Come fare un DIV pieghevole in CSS

Utilizzare i tag DIV pieghevoli per consentire ai visitatori al tuo sito Web leggere contenuti aggiuntivi senza essere costretti a lasciare la pagina corrente. Questi tag consentono di creare una pagina con numerose rubriche espandibile che consentono agli utenti di visualizzare solo i dettagli che sono interessati senza guadare però lunghe pagine di testo. Ricerche più veloci rendono il tuo sito più user friendly e che permettono di migliorare il valore per i tuoi visitatori come uno strumento di riferimento.

Istruzioni

1

Creare un tag "< div >" contenente il testo popup. Questo posto nella sezione "< body >" del codice HTML. Impostare lo stato di visualizzazione iniziale su none:

< div id = "mydiv" style = "display: nessuno" >< testo Popup h3 > < br > come funziona questo look? < / h3 >< / div >

2

Assegnare un collegamento ipertestuale ancoraggio per aprire un JavaScript per eseguire l'azione reale a comparsa al tag "< h3 >". In questo script, fare clic sul pulsante sinistro del mouse attiva il collegamento. Inserire il codice direttamente sotto la riga precedente:

< a href = "javascript:;" onmousedown="toggleDiv('mydiv');" > fare clic per espandere < /a >

3

Creare la funzione JavaScript che controlla la visibilità del tuo testo CSS "< div >" nascosto. Inserire questa funzione nella sezione "< head >" del codice HTML:

< script language = "javascript" >
Function toggleDiv(divid) () {

if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}

}
< / script >

Consigli & Avvertenze

  • In questo esempio, viene visualizzato il testo "Fare clic per mostrare o nascondere" con le proprietà assegnate al tag "< h3 >". La prima volta che l'utente fa clic sul testo, il messaggio "Testo Popup", "come funziona questo aspetto?" viene visualizzato sullo schermo con un ritorno al posto della virgola. Il messaggio scomparirà quando l'utente fa clic il tag una seconda volta.