Come gestire la visualizzazione di più elementi contemporaneamente.

Printable View

02-09-2018, 18.41.31
giocosentino

Come gestire la visualizzazione di più elementi contemporaneamente.

Salve, stò scrivendo autonomamente il codice del mio sito personale. L'idea era quella di fare qualcosa di estremamente semplice. Ed essendo realmente semplice pensavo, invece di fare più pagine linkate tra loro, creare più elementi, in un unica pagina, da visualizzare o nascondere a secondo di quale si vuole navigare. In passato ho già fatto qualcosa del genere ma con jquery. Ma, per rimanere nel semplice, cercavo un metodo meno complicato. Ho visto che è possibile controllare la visualizzazione di un elemento anche con javascript ma non sono riuscito a capire se è possibile farlo con più elementi contemporaneamente. E se si, come scrivere il codice. Qualsiasi aiuto è benaccetto e vi ringrazio anticipatamente.
02-09-2018, 18.57.12
alemoppo

Non ho capito, intendi una cosa del genere?

Codice HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test elementi nascosti</title> <style type="text/css"> div {height:200px; width: 200px;} #num1{background-color:#F00} #num2{background-color:#0F0} #num3{background-color:#00F} </style> <script type="text/javascript"> window.onload = function() { document.getElementById('cliccami').addEventListener("click", function(){ document.getElementById('num1').style.display = "none"; document.getElementById('num3').style.display = "none"; }); } </script> </head> <body> <div id="num1">Elemento 1</div> <div id="num2">Elemento 2</div> <div id="num3">Elemento 3</div> <button id="cliccami">nascondi 1 e 3</button> </body> </html>

Ciao!
02-09-2018, 19.25.53
giocosentino

Si, però nel tuo codice entrambi i div sono visualizzati nello stesso modo, mentre uno rimane inalterato e quindi visibile. Quello che volevo sapere era se potevo modificare a mio piacimento le varie visualizzazioni. Anche se forse potrebbe funzionare anche così dovrei fare una prova. In rete di solito si trovano solo esempi che comprendono una sola funzione. E quindi non riesco a capire come scrivere correttamente il codice. Comunque grazie.
02-09-2018, 20.14.35
alemoppo

Quello era solamente un esempio, se hai capito il codice puoi modificarlo per fa apparire/sparire qualsiasi elemento, in qualsiasi numero di elementi.

Ciao!
09-09-2018, 19.31.45
giocosentino

Scusami se ti rispondo soltanto adesso ma sono stato impegnato e non ho avuto proprio il tempo. Allora la cosa funziona MA avrei la necessità di inserire i <button> in un menu che viene visualizzato all'interno di elementi div. E in questo modo non funziona più. E' possibile che sia io a fare qualche errore ma purtroppo non ne riesco a capire quale. Ho l'impressione che possa essere l'evento "window.onload" che carica la funzione una sola volta mentre, probabilmente, sarebbe necessario ricaricarla ogni volta che viene fatta una scelta premendo un <button>. Spero di essermi spiegato. :sad::???::shock:
09-09-2018, 19.56.14
alemoppo

L'evendo onload viene appunto eseguito ogni volta che si carica la pagina (quindi solo una volta).

Per aggiungere eventi (come un click), usa addEventListener.

Ciao!
14-09-2018, 21.28.15
giocosentinoblog

Come non detto era tutta colpa mia, cercavo disperatamente di complicarmi la vita. Invece funziona tutto alla meraviglia. Grazie!!!! :lol: