rendere visibili e nascondere DIV con onlink

asevenx · 13 Feb 2012

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 · 13 Feb 2012

ciao
il tuo post non riguarda php, posta in js

Eliox · 13 Feb 2012

Sposto la discussione nella categoria apposita.

asevenx · 13 Feb 2012

si, scusate è l'abitudine..

soluzioni?

borgo italia · 13 Feb 2012

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 · 13 Feb 2012

borgo italia ha scritto:
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 · 13 Feb 2012

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 · 13 Feb 2012

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 · 14 Feb 2012

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 · 15 Feb 2012

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 · 15 Feb 2012

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 · 15 Feb 2012

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 · 15 Feb 2012

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

Cerca

Cerca

rendere visibili e nascondere DIV con onlink

asevenx

Utente Attivo

borgo italia

Super Moderatore

Eliox

Utente Attivo

asevenx

Utente Attivo

borgo italia

Super Moderatore

Vale2

Utente Attivo

asevenx

Utente Attivo

max_400

Utente Attivo

borgo italia

Super Moderatore

asevenx

Utente Attivo

borgo italia

Super Moderatore

asevenx

Utente Attivo

borgo italia

Super Moderatore

Discussioni simili