Come nascondere e Mostra un Div Utilizzando JavaScript

February 20

Come nascondere e Mostra un Div Utilizzando JavaScript


pagine web interattive, o le pagine che utilizzano elementi che gli spettatori possono cambiare, possono beneficiare della possibilità di visualizzare o nascondere gli elementi della pagina. Per esempio, se si sta progettando un negozio, si potrebbe desiderare di dare ai visitatori la possibilità di fare clic su un pulsante "ulteriori informazioni" per ottenere maggiori informazioni su un potenziale acquisto. Facendo uso di questa capacità si basa su JavaScript e l'attributo CSS "display", che può essere modificato in modo dinamico.

istruzione

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

2 Aggiungere il "id = 'hidetoggle'" linea di confine tra le tre lettere "div" e la chiusura ">" del div. Se non ci sono altri elementi di stile o di posizionamento usati, il div sarà ora simile a questa: "<div id = 'hidetoggle'>"; se ci sono altri attributi nel div, aggiungere l'elemento id prima per comodità 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 = 'block'"> Mostra </ span>

4 Hit "ENTER" per aggiungere una seconda riga di codice immediatamente successivo al primo. Per questa linea, il codice dovrebbe essere simile al seguente:

<Span style = "border: 1px solid nero" ". Document.getElementById ( 'hidetoggle') style.display = 'none'" onclick => Nascondi </ span>

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

Consigli e avvertenze

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