Cambiare contenuto Div

**Zippu** · 17-02-2013, 00:58

Ho trovato questo codice utilissimo e sto cercando di modificarlo, potete aiutarmi?
Vorrei creare sei pulsanti con sei contenuti diversi, e quindi ovviamente più variabili da scrivere in javascript, ma ad un certo punto mi da errore, riuscite ad aiutarmi?
Non conosco bene il linguaggio Java quindi non saprei come fare... Grazie!!!

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

</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>

**cavicchiandrea** · 17-02-2013, 01:30

codice:

<html>
<head>
<script type="text/javascript" language="Javascript">
<!--
function mostraMenu(idcliccato) {
for(var i=1; i<=3;i++){
if(i==idcliccato){
document.getElementById('menu'+i).style.display = 'block';
}else{
document.getElementById('menu'+i).style.display = 'none';
}
}
}
-->
</script>
</head>
<body>
<input type="button" value="menu1" onClick="mostraMenu(1);">
<input type="button" value="menu2" onClick="mostraMenu(2);">
<input type="button" value="menu3" onClick="mostraMenu(3);">
<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>

**Zippu** · 17-02-2013, 01:33

Ma non è uguale a prima?

**cavicchiandrea** · 17-02-2013, 01:44

Pensavo che non fosse fondamentale, e preferisco "ottimizzare" il codice, se non è quello che volevi non considerare la mia risposta e attendi altri suggerimenti

**Zippu** · 17-02-2013, 01:47

Si il codice è per me la strada giusta, volevo chiedere se si riesce a fare con 6 pulsanti nello stesso identico modo, ho provato a scrivere le variabili, ma non ci salto fuori....
Riesci ad aiutarmi?

Grazie

**cavicchiandrea** · 17-02-2013, 02:10

Se intendi le modifiche al codice che ho scritto (al quale ho apportato qualche miglioria) sono semplici aggiungi gli altri tre menu4/5/6 e porti a 6 il ciclo for(var i=1; i<=6;i++){ se intendi "sistemare" il "tuo" codice no non ne vedo il motivo il mio codice funziona ed è più semplice e sintetico

**Zippu** · 17-02-2013, 12:00

Grazie mille!!!
Si è vero è ottimizzato!!!! Sono io che sono stato distratto, scusami

!!!
E molto più semplice cosi!!!

Un ultima cosa, adesso lo sto modificando graficamente....
In input al posto di input "button" posso caricarci un immagine, o due immagine create da me per il rollover?

Poi ho inserito tutto il codice annidato all'interno di una altro div contenitore, ovvio che posso attraverso div id, modificare e spaziare il testo a mio piacimento.... giusto?

P.S. Ah si può dare al testo del primo pulsante quando carichi la pagina, che sia già visibile?

Scusa tutte queste domande e che sono esaltato

sono alle mie prime righe di codice java e mi piace molto!!!

Ciao e grazie!!

**cavicchiandrea** · 17-02-2013, 13:42

Originariamente inviato da Zippu
Grazie mille!!!
Si è vero è ottimizzato!!!! Sono io che sono stato distratto, scusami

!!!
E molto più semplice cosi!!!

Un ultima cosa, adesso lo sto modificando graficamente....
In input al posto di input "button" posso caricarci un immagine, o due immagine create da me per il rollover?

Si, se inserisci onclick direttamente nella immagine oppure aggiungi un href (<immagine/>)

Poi ho inserito tutto il codice annidato all'interno di una altro div contenitore, ovvio che posso attraverso div id, modificare e spaziare il testo a mio piacimento.... giusto?

E' ininfluente dati che ti riferisci ad egli id specifici

P.S. Ah si può dare al testo del primo pulsante quando carichi la pagina, che sia già visibile?

Si, basta che togli il display:none dal div

Scusa tutte queste domande e che sono esaltato

sono alle mie prime righe di codice java e mi piace molto!!!

Ciao e grazie!!

L'euforia è importante ma io mi leggerei anche un libro non affidarti solo al forum

**Zippu** · 17-02-2013, 18:46

Hai ragione!!! Ho comprato un paio di libri, e ci do una occhiata per andare avanti pian piano!!
Solo che sò che un modo per imparare è provare provare provare, almeno per me.....
E logico che se uno non ha le basi, non è che può arrivare chissà dove....

Appena faccio ho un po' di tempo leggo.... (hai qualche consiglio per un libro sul javascript non molto peso, ma chiaro?)

Comunque grazie!!! Sono riuscito a fare tutto, tranne inserire le immagini rollover....

Ti spiego....

Ho inserito questa funzione in un div in image ho messo lo sfondo che cercavo

<script type="text/javascript" language="Javascript">

</script>
<body>
<input type="image" onClick="mostraMenu(1);" value="button1" src="img/1 />
<input type="image" onClick="mostraMenu(2);" value="button2" src="img/2" />
<input type="image" onClick="mostraMenu(3);" value="button3" src="img/3" />
<input type="image" onClick="mostraMenu(4);" value="button4" src="img/4" />
<input type="image" onClick="mostraMenu(5);" value="button5" src="img/5" />
<input type="image" onClick="mostraMenu(6);" value="button6" src="img/6" />
</div>

Il resto dei div li ho messi in un altro div appena sotto (perché ho molto testo e quando partiva lo scroll anche il menu scompariva)

<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>

Si, se inserisci onclick direttamente nella immagine oppure aggiungi un href (<immagine/> )

Non ho capito questo.... ciao

**cavicchiandrea** · 17-02-2013, 19:57

Spero che tu non te la prenda, ma non ho tempo (e anche poca voglia) di farti da tutor, leggi i libri che hai comprato e molti dubbi svaniranno

Discussione: Cambiare contenuto Div

Strumenti discussione

Ricerca discussione

Visualizza

Cambiare contenuto Div

Permessi di invio