Sostituire contenuto di un div!

**Madsex** · 06-12-2010, 02:45

Salve raga, co,e da titolo, mi piacerebbe che il contenuto di un div che viene visualizzato immediatamente all'apertura della pagina possa essere sostituito a seconda del click effettuato dall'utente tramite il menù.

Ho trovato degli script che fanno questo, ma tutti prevedono di inserire all'interno del tag <a> la funzioncina che mostra del testo.

Preferirei però, per comodità e semplicità di scrittura, creare prima i div nascosti e a seconda del click richiamare in quel punto tali div, si può fare?

Per farmi capire meglio scrivo a volo un esempio maccheronico.

<div id=principale>Testo e immagini visualizzate all'apertura</div>

<div id=secondo>Testo di un altro div che non sarà visualizzato subito(display:none con css credo si possa fare così), ma che al click corrispondente sul menu sostituisce il contenuto nel div principale!</div>

e così via a seconda di quanti div mi occorreranno.

Spero di aver reso l'idea.

Grazie in anticipo!

**NonCeLaFaccio+** · 06-12-2010, 12:14

Ciao,
tempo fa avevo risposto ad un problema simile, ho recuperato il codice, vedi se può andar bene:

codice:

<html>
   <head>
      <script type="text/javascript" language="Javascript">
         <!--

         function mostraMenu(idcliccato) {

               if(idcliccato=='menu1') {
                  var idnoncliccato_1 = 'menu2';
                  var idnoncliccato_2 = 'menu3';
               } else {
                  if(idcliccato=='menu2'){
                     var idnoncliccato_1 = 'menu1';
                     var idnoncliccato_2 = 'menu3';
                  } else {
                     var idnoncliccato_1 = 'menu1';
                     var idnoncliccato_2 = 'menu2';
                  }
               }

               var div1 = document.getElementById(idcliccato).style;
               var div2 = document.getElementById(idnoncliccato_1).style;
               var div3 = document.getElementById(idnoncliccato_2).style;

               div1.display = 'block';
               div2.display = 'none';
               div3.display = 'none';
         }
         -->
      </script>
   </head>
   <body>
      <input type="button" value="menu1" onClick="mostraMenu('menu1');">
      <input type="button" value="menu2" onClick="mostraMenu('menu2');">
      <input type="button" value="menu3" onClick="mostraMenu('menu3');">
      <div id="menu1" style="display:none; width:200px; background-color:yellow;">
         <span>Questo è il primo menu</span>
      </div>
      <div id="menu2" style="display:none; width:200px; background-color:red;">
         <span>Questo è il secondo menu</span>
      </div>
      <div id="menu3" style="display:none; width:200px; background-color:green;">
         <span>Questo è il terzo menu</span>
      </div>
   </body>
</html>

praticamente visualizza o nasconde delle div a seconda del pulsante che viene cliccato, non dovrebbe essere difficile adattarlo alla tua esigenza

Ciao

**mecha** · 06-12-2010, 18:22

Ecco un altro metodo. La proprietà innerHTML definisce il contenuto dell'elemento selezionato da getElementById. Il contenuto da inserire nel div, puoi scriverlo nelle variabili "bar" e "foobar"

codice:

<script>
var bar = "Scrivo il contenuto di bar nel div"
var foobar = "Scrivo il contenuto di foobar nel div"
</script>

bar
foobar

<div id="foo"></div>

Ciao!

**Madsex** · 08-12-2010, 04:53

I vostri consigli non sono utili, di più, cistodirò tali script gelosamente, era da un po' che volevo chiarirmi questa storia.

Dopo questa sviolinata (che apparentemente sembra un intortamento ma assicuro che non lo è), vi devo chiedere di più.

ieri, attendendo un qualche tipo di risposta, mi sono imbattuto in un sito che mostra un simpatico movimento in apertura del div centrale(inizialmente è nascosto poi appare in scorrimento da sinistra a destra).Sono riuscito a riprodurlo e non vi nego che ho scopiazzato dal codice del sito in questione per certe cose che non capivo(non è bello, ma certe volte pur di capire........).

Ora però non riesco a fare una cosa apparentemente semplice cioè far rifare il movimento a ogni click sul menu.Analizzando a fondo la cosa ho compreso un po' di fatti ma non vengo a capo della soluzione.

I link del menù sono generati così

contact

cliccando su contact riparte l'animazione(prima nasconde poi riappare il div) e teoricamente dovrebbe apparire il contenuto relativo al click.

Ciò non accade perchè(se non ho inteso male) tra le parentesi("qui c'è l'inghippo") va un qualche comando che fa puntare a un altro foglio da cui si prende il contenuto.Usando i vostri precedenti consigli non ottengo altro che cambiare "a volo " il div ma senza animazione perchè se tolgo changeContent(' ') l'animazione jquery non parte.

Isomma, mi piacerebbe creare un foglio html o php e scrivere il link così

contact

E' possibile?

Scusate la lunghezza infinita ma quando parlo di cose che non capisco tendo a specificare ogni cosa per farmi capire

Grazie in anticipo!

**NonCeLaFaccio+** · 09-12-2010, 11:23

Perché non ci posti il codice invece di "raccontarcelo"?

Sarebbe molto più chiaro!

Ma poi cosa intendi con prelevare il contenuto da un'altra pagina?
Tieni presente che qui parliamo di javascript quindi di elaborazioni lato client e il client ha a disposizione una pagina alla volta, quella che gli viene inviata dal server.

Caso mai è il server che deve decidere che contenuti inserire via via nelle div.

Discussione: Sostituire contenuto di un div!

Strumenti discussione

Ricerca discussione

Visualizza

Sostituire contenuto di un div!

Permessi di invio