Div Nascondi/Mostra

Salve a tutti,

Mi sorge un problemino che pensavo di risolvere cercando qui nel forum, ma sfortunatamente non ho trovato nulla nei post precedentemente già aperti, o magari cercavo io in modo errato. Comunque sia vi espongo il mio problema, vorrei appunto usare la funzione div per nascondere e poi mostrare al click del mouse ma non riesco a trovare una guida per il codice.

In pratica vorrei creare un menù a sinistra della pagina, e poi una volta cliccato in un bottone, si visualizzerà il testo al centro della pagina, e una volta cliccato in un altro bottone scomparirà quel testo comparendone un altro e così via.

Sapreste darmi una mano?
O magari potete postarmi una guida che faccia a caso mio?

Grazie ancora Alessio.

devi usare javascript e non php se non mi sbaglio

ciao

Codice HTML:

---

<script type="text/javascript">
function view(id) {
    document.getElementById(id).style.display='block';
}
function hidden(id) {
    document.getElementById(id).style.display='none';
}
</script>
<a id="link" href="javascript:view('nasc');view('link2')" onclick="hidden('link')">Visualizza</a>
<a id="link2" style="display: none" href="javascript:hidden('nasc');hidden('link2')" onclick="view('link')">Nascondi</a>
<span id="nasc" style="display: none">Testo nascosto</span>

---

Citazione:

---

Originalmente inviato da gabryhacker

Codice HTML:

---

<script type="text/javascript">
function view(id) {
    document.getElementById(id).style.display='block';
}
function hidden(id) {
    document.getElementById(id).style.display='none';
}
</script>
<a id="link" href="javascript:view('nasc');view('link2')" onclick="hidden('link')">Visualizza</a>
<a id="link2" style="display: none" href="javascript:hidden('nasc');hidden('link2')" onclick="view('link')">Nascondi</a>
<span id="nasc" style="display: none">Testo nascosto</span>

---

---

Innanzitutto grazier per avermi risposto, e aguri di buon anno.
Volevo però chiederti se io volessi una struttura più complicata nel senso io ho più pulsanti

Mostra
Contatti
Foto

Schiaccio su mostra e al centro della pagina mi compare il testo, poi schiaccio su contatti e mi compare un altro testo e nel frattempo ha oscurato gli altri due div, quale sarebbe il codice in questo caso? Perchè io chiedevo appunto questo.

Grazie ancora per le eventuali risposte, buon anno Alessio.

ciao!

Al posto di "testo nascosto" puoi metterci i comandi: (ESEMPINO)

Codice HTML:

---

<a id="link" href="javascript:view('nasc');view('link2')" onclick="hidden('link')">Visualizza</a>
<a id="link2" style="display: none" href="javascript:hidden('nasc');hidden('link2')" onclick="view('link')">Nascondi</a>
<span id="nasc" style="display: none"><input type="button" value="vai!" onClick="window.navigate('http://alemoppo.altervista.org');" ><input type="button" value="contatti">

---

no?

ciao!

Citazione:

---

Originalmente inviato da alemoppo

ciao!

Al posto di "testo nascosto" puoi metterci i comandi: (ESEMPINO)

Codice HTML:

---

<a id="link" href="javascript:view('nasc');view('link2')" onclick="hidden('link')">Visualizza</a>
<a id="link2" style="display: none" href="javascript:hidden('nasc');hidden('link2')" onclick="view('link')">Nascondi</a>
<span id="nasc" style="display: none"><input type="button" value="vai!" onClick="window.navigate('http://alemoppo.altervista.org');" ><input type="button" value="contatti">

---

no?

ciao!

---

Ciao, scusami forse ci siamo fraintesi.

Non voglio che il mio menù o bottoni siano nascosti. Io volevo fare che nella mia homepage a sinistra vi era il menù al centro della pagina nulla, perchè appunto i div sono nascosti una volta che però schiaccio su un bottone del mio menù allora renderà visibile il div ma nel frattempo gli altri div restono oscurati, poi appena schiaccio un altro bottone del mio menù allora renderà visibile un altro div e oscurerà gli altri div in modo che scompare il contenuto che c'era precedentemente al centro della pagina e ne compaia uno nuovo. Spero di essere stato abbastanza chiaro, vorrei tanto postare un esempio ma attualmente non ne trovo.
--------------
Sono riuscito a trovare un esempio :

http://www.land-dominia.it/index.php

In questo sito potete notare che schiacciando nei vari tasti del menù si modifica solo il contenuto nella parte centrale, vorrei ottenere questo risultato nel mio sito.
Grazie ancora per la vostra pazienza Alessio.

Allora scrivi questo tra i tag <head> della tua pagina:

Codice HTML:

---

<script type="text/javascript">
function showHide(id)
{
 if (id.style.display != 'block')
 id.style.display = 'block';
 else
 id.style.display = 'none';
}
</script>

---

Poi, nel <body> il link per mostrare/nascondere oggetto:

Codice HTML:

---

<a href="#" onClick="javascript:showHide(ID);">Visualizza</a>
<div id="ID" style="display:none">CONTENUTO</div>

---

Al posto del link puoi mettere anche una immagine o quello che preferisci, l'importante è che ci sia questa dicitura:

Codice HTML:

---

onClick="javascript:showHide(ID);"

---

Dove ID sta per l'id dell'oggetto da mostrare nascondere :wink:

Citazione:

---

Originalmente inviato da jcdesign

Allora scrivi questo tra i tag <head> della tua pagina:

Codice HTML:

---

<script type="text/javascript">
function showHide(id)
{
 if (id.style.display != 'block')
 id.style.display = 'block';
 else
 id.style.display = 'none';
}
</script>

---

Poi, nel <body> il link per mostrare/nascondere oggetto:

Codice HTML:

---

<a href="#" onClick="javascript:showHide(ID);">Visualizza</a>
<div id="ID" style="display:none">CONTENUTO</div>

---

Al posto del link puoi mettere anche una immagine o quello che preferisci, l'importante è che ci sia questa dicitura:

Codice HTML:

---

onClick="javascript:showHide(ID);"

---

Dove ID sta per l'id dell'oggetto da mostrare nascondere :wink:

---

Grazie tante per il codice, solo che con quel codice i div si accavallano.
Ho un pò cercato sul forum ed ho trovato una discussione in cui si parlava appunto di questo ho cercato di tirare giu un codice ma non funziona mi date na mano?

Codice:

---

<script type="text/javascript">
function ShowAndHide(id1){
if(document.getElementById){
    var mostra = document.getElementById('mostra');
    var commenti = document.getElementById('commenti');
    var eseguito = document.getElementById('eseguito');
    if(id1=="mostra"){
        mostra.style.display="block";
        commenti.style.display="none";
        eseguito.style.display="none";
        }
    else if(id1=="commenti"){
        mostra.style.display="none";
        commenti.style.display="block";
        eseguito.style.display="none";
        }
    else if(id1=="eseguito"){
        mostra.style.display="none";
        commenti.style.display="none";
        eseguito.style.display="block";
        }
    }
}
</script>

<a href="#" onClick="showandHide(mostra);">Mostra</a>
<div id="mostra" style="display:none">CONTENUTO</div>

<a href="#" onClick="showandHide(eseguito);">Eseguito</a>
<div id="eseguito" style="display:none">proviamo</div>

<a href="#" onClick="showandHide(Commenti);">Commenti</a>
<div id="Commenti" style="display:none">funziona?</div>

---

Grazie ancora per le eventuali risposte Alessio.

Quanto codice.., potresti usare jquery in versione minima ed usare le sue funzione per nascondere e visualizzare menù (magari riesci a fare qualcosa di più carino).

Ciao