Nwlapcug.com


Come nascondere & Visualizza un Div utilizzando JavaScript



Pagine web interattive, o le pagine che utilizzano gli elementi cui gli spettatori possono cambiare, possono beneficiare della possibilità di mostrare o nascondere gli elementi della pagina. Ad esempio, se stai progettando una vetrina virtuale, è possibile dare ai visitatori la possibilità di fare clic su un pulsante "ulteriori informazioni" per ottenere ulteriori dettagli su un potenziale acquisto. Facendo uso di questa capacità si basa su JavaScript e l'attributo CSS "display", che può essere modificato dinamicamente.

Istruzioni

1

Aprire il file. html o. php contenente il div cui visibilità che si desidera modificare utilizzando un editor di testo semplice. Scorrere verso il basso il div---la riga di codice che inizia con "< div >" e termina, dopo che il contenuto è fornito, con "< / div >".

2

Aggiungere la riga "id = 'hidetoggle'" tra le tre lettere "div" e la chiusura ">" del div. Se non ci sono nessun altro stile o il posizionamento degli elementi utilizzati, il div ora avrà un aspetto simile a questo: "< div id = 'hidetoggle' >"; Se ci sono altri attributi in div, aggiungere innanzitutto l'elemento id per facilità di riferimento.

3

Scorrere fino alla fine del div e premere "invio" per iniziare una nuova riga. Su di esso, digitare il seguente codice, o tagliare e incollarlo nel documento:

< span style = "border: 1px solid black" onclick="document.getElementById('hidetoggle').style.display = 'bloccare'" > Visualizza < / span >

4

Premere nuovamente "enter" per aggiungere una seconda riga di codice che segue immediatamente il primo. Per questa linea, il codice dovrebbe risultare simile al seguente:

< span style = "border: 1px solid black" onclick="document.getElementById('hidetoggle').style.display = 'none'" > nascondere < / span >

5

Salvare il file HTML e aprirlo nel browser. Ora vedrete due pulsanti etichettati "show" e "nascondere", che è possibile fare clic per attivare o disattivare la visibilità del vostro div.

Consigli & Avvertenze

  • È possibile modificare l'id del div; ogni div che si desidera visualizzare o nascondere sarà necessario un id separato. Se si modifica il valore, però, assicuratevi di cambiarlo in entrambi i pulsanti modificando il valore contenuto tra le parentesi nella parte "getElementById ()" del codice.