rendere visibili e nascondere DIV con onlink

asevenx

Utente Attivo
7 Nov 2009
312
0
16
salve, so che onclick="document.getElementById('').style.display='block'" posso rendere visibile un div attraverso il suo id. Ma come faccio se volessi creare 3 div, da rendere visibili uno ad uno quando l'utente clicca su un apposita immagine, visualizzando un solo div per immagine? In poche parole ho 3 immagini che devono richiamare ognuna un solo div.

grazie
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
se non ho capito male in funzione di dove clicci vuoi vedere un div, forse esiste un sistema migliore, ma potresti provare così
HTML:
<body>
<div id="uno" style="visibility:hidden ">questo è il dv uno</div>
<div id="due" style="visibility:hidden ">questo è il dv due</div>

<p><a href="#" onclick="document.getElementById('uno').style.visibility ='visible';document.getElementById('due').style.visibility ='hidden';">uno</a></p>
<p><a href="#" onclick="document.getElementById('due').style.visibility ='visible';document.getElementById('uno').style.visibility ='hidden';">due</a></p>
</body>
al posto dei link le immagini

sembrerebbe funziare, certo che se i div sono molti diventa una pizza
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
ciao
se non ho capito male in funzione di dove clicci vuoi vedere un div, forse esiste un sistema migliore, ma potresti provare così
HTML:
<body>
<div id="uno" style="visibility:hidden ">questo è il dv uno</div>
<div id="due" style="visibility:hidden ">questo è il dv due</div>

<p><a href="#" onclick="document.getElementById('uno').style.visibility ='visible';document.getElementById('due').style.visibility ='hidden';">uno</a></p>
<p><a href="#" onclick="document.getElementById('due').style.visibility ='visible';document.getElementById('uno').style.visibility ='hidden';">due</a></p>
</body>
al posto dei link le immagini

sembrerebbe funziare, certo che se i div sono molti diventa una pizza

Ciao,

non ho capito nenche io se sono tre div diversi devono essere visualizzati in punti diversi o l'apertura di un nuovo div deve disattivare quella fatta in precedenza.

@borgo italia

le propietà visibility:hidden e visibility ='visible'

visibility:hidden nasconde il div ma continua ad occupare spazio nella pagina è solo nascosto visibilmente ma il suo spazio selo tiene.

Per questo e meglio usare display ='block' per visualizzare il div e display =none" per escudere totalmente la sua presenza dalla pagina e lasciare szio agli altri oggetti.

Vale.
 

asevenx

Utente Attivo
7 Nov 2009
312
0
16
cerco di spiegarmi meglio con un esempio abbastanza banale, quello che voglio è ciò che si potrebbe fare con i frame, ovvero cliccando su di un link, viene richiamato nel frame la pagina associata. Mettiamo caso io avessi 3 link che richiamano tre diverse pagine in unico frame, ecco cosa mi serve. Lo farei con i frame ma i div hanno dimensioni diverse e quindi vorrei evitare.

La difficoltà (almeno per uno come me) è quella che cliccando su di un link si renda visibile un div, ma solo ed esclusivamente quel div, in quanto appunto devono occupare tutti la stessa posizione.

vi ringrazio per le risposte :)
 

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
bòòòòòòòòò..........

guarda un po se ti piace quest'esempio



Esempio
http://max400.netne.net/div-display.html

all'inizio i 3 div sono nascosti.
Ogni volta che clicchi su un pulsante (o immagine) compare il div corrispondente
e nello stesso tempo scompaiono gli altri...ovviamente occupano la stessa posizione

Guarda se ti va bene in caso ti dò il codice e continuiamo le modifiche

Er Topo
Max400
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
oppure se al posto delle immagini vuoi caricare una pagina (htm o php), parafrasando quello che ha scritto max,
potresti provare a fare così anche mettendo la posizione e le misure di dove vuoi i div

HTML:
<script type="text/javascript">
<!--
function prima(){
document.getElementById('uno').style.display="block";
document.getElementById('due').style.display="none";
document.getElementById('tre').style.display="none";
}
function seconda(){
document.getElementById('due').style.display="block";
document.getElementById('uno').style.display="none";
document.getElementById('tre').style.display="none";
}
function terza(){
document.getElementById('tre').style.display="block";
document.getElementById('uno').style.display="none";
document.getElementById('due').style.display="none";
}
//-->
</script>
<style type="text/css">
#uno{
display:none;
width:100px;
height:100px;
top: 100px;
left:400px;
position:absolute;
}
#due{
display:none;
width:100px;
height:100px;
top: 100px;
left:400px;
position:absolute;
}
#tre{
display:none;
width:100px;
height:100px;
top: 100px;
left:400px;
position:absolute;
}
</style>
<body>
<div id="uno" ><iframe src="uno.htm"></iframe></div>
<div id="due" ><iframe src="due.htm"></iframe></div>
<div id="tre" ><iframe src="tre.htm"></iframe></div>
<p><a href="#" onclick="prima()"><img src="uno.jpg">uno</a></p>
<p><a href="#" onclick="seconda()"><img src="due.jpg">due</a></p>
<p><a href="#" onclick="terza()"><img src="tre.jpg">tre</a></p>
</body>
è evidente che devi farti le pagina html e le eventuali immagini

@max
<script type="text/javascript">
<style type="text/css">
 

asevenx

Utente Attivo
7 Nov 2009
312
0
16
Ho seguito i vostri consigli, però ho un problema. All'interno dei div ho inserito codici sia in html che in php. Infatti la mia idea era quella di inserire 3 include collegati ad altrettante pagine php create da me (vorrei evitare i frame perché le pagine hanno lunghezze diverse). Tutta via lo script non funziona come vorrei, infatti se clicco sul primo link (immagine) si visualizza correttamente il primo div, ma questo non accade per gl'altri due link dove cliccando non appare nulla. La cosa strana è che senza le parti in php funziona tutto alla perfezione. Sapreste dirmi il perché? Possibile che include o php incidano negativamente sullo script?
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
Tutta via lo script non funziona come vorrei, infatti se clicco sul primo link (immagine) si visualizza correttamente il primo div, ma questo non accade per gl'altri due link dove cliccando non appare nulla. La cosa strana è che senza le parti in php funziona tutto alla perfezione. Sapreste dirmi il perché? Possibile che include o php incidano negativamente sullo script?
a quale script ti riferisci?
l'include non credo, php potrebbe essere che qualche variabile o altro js vada ad interferire.
puoi provare a farti dlelle semplici pag php o htm con solo scritto "questa è la pag pinco" sensa altro e prova(stai attento coll'include che non venga ripetuto più le volte l'ambaradan dell'intestazione della pagina <!DOCTYPE HTML PUBLIC ...><html><head>...)
 

asevenx

Utente Attivo
7 Nov 2009
312
0
16
ho provato ed effettivamente sia con pagine html, che php semplici, funziona.
(stai attento coll'include che non venga ripetuto più le volte l'ambaradan dell'intestazione della pagina <!DOCTYPE HTML PUBLIC ...><html><head>...)
nono, scrivo sempre se solo <html><head>ecc..
quindi l'errore sta in qualcosa contenuta nelle pagine php, che contengono dei guestbook, quindi hanno una struttura articolata, con diverse variabili, ora provo a snellirla e vedere se cambia qualcosa. Altrimenti quali possono essere le possibili cause?
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
Altrimenti quali possono essere le possibili cause?
se non ci sono conflitti tra variabili e funzioni js varie (nomi uguali) di preciso non saprei, anche se mi sembra di aver letto (se le usi) alcune jquery sono tra loro incompatibili