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.046
150
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

div-nasc-mostra.jpg


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.046
150
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.046
150
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.046
150
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
L Rendere una parte trasparente Photoshop 3
D Rendere testo cliccabile PHP 3
P Aiuto per rendere un Bot Telegram Privato PHP 1
G Rendere dati di una tabella mysql link PHP 22
S [PHP] Rendere visibile variabile di un costrutto if in un altro costrutto if PHP 1
Domenico_Falco1 Rendere dinamico un sito web con chiamate ajax e php e variabili json PHP 12
S rendere mio sito mobile compatibile Offerte e Richieste di Lavoro e/o Collaborazione 2
axem [PHP]rendere cliccabile contenuto PHP 10
R [Javascript] Rendere una funzione sempre visibile Javascript 2
T [PHP] rendere facoltativo il caricamento di un file PHP 5
G [Javascript] rendere visibile un iframe dopo l'avvenuto caricamento del video che esso contiene Javascript 4
S [Javascript] Nascondere e rendere visibile un Div cliccando su due link Javascript 2
ecosito [HTML ][PHP] rendere attivo il modulo contatti di un template HTML e CSS 9
M Come rendere solo lettura campo textarea PHP 2
S Rendere responsive un player che ha dimensioni fisse HTML e CSS 3
Shyson Rendere select obbligatoria Javascript 1
T Rendere inaccessibile il forum agli utenti non registrati phpBB 4
M Tumblr - Rendere cliccabili tutte le immagini HTML e CSS 4
Z Rendere visibile un pulsante HTML e CSS 1
G rendere visibile con php cartella public aruba Hosting 2
simonetta619 creare una classe per rendere dinamico l'inserimento PHP 0
G [VENDO] Servizi Pubblicitari Per Youtube (Per Rendere Conosciuto Vostro Video/Canale) Vendere e Acquistare pubblicita' online 0
G [VENDO] Servizi Pubblicitari Per Youtube (Per Rendere Conosciuto Vostro Video/Canale) Annunci servizi di Social Media Marketing 0
G [VENDO] Servizi Pubblicitari Per Youtube (Per Rendere Conosciuto Vostro Video/Canale) Annunci servizi di Social Media Marketing 0
M rendere attivo un oggetto CSS tramite javascript Javascript 3
E rendere il codice più funzionale PHP 5
Frank10 Script o qualsiasi cosa per rendere autonomo chi vuole modificare contenuti PHP 3
D Come posso rendere obbligatorio un drop down menu? Javascript 12
Athene Rendere visibile un errore in una pagina di login in due modi differenti PHP 8
M [htaccess] Rendere accessibile solo la pagina riscritta Web Server 0
S Rendere sito visibile solo in Italia Hosting 0
M Consigli su come rendere fluido questo template HTML e CSS 0
P HTML - rendere cliccabile parte del testo HTML e CSS 2
Z [AS3] Rendere attivo pulsante dentro animazione di altro pulsante Flash 0
H Rendere cliccabile l'header HTML e CSS 10
X rendere visibile ad un determinato id PHP 2
C [JAVA]Come rendere opzionale un parametro di un costruttore? Java 3
M rendere menu "sopra al testo" Flash 1
f.quintaliani rendere un tratto irregolare come se fosse fatto a mano Webdesign e Grafica 6
S rendere campi form obbligatori Javascript 1
G Come posso rendere invisibili cartelle e file sul web PHP 0
C php, rendere cliccabile un link PHP 0
peppoweb Manuale on-line da Microsoft per rendere sicuri i server Windows e Software 0
F Servizi Seo. Visite reali e organiche. tutte visibili su google analytics Annunci servizi di Social Media Marketing 0
bubino8 [WordPress] bozze non visibili WordPress 0
A [HTML] Checkbox non visibili su tutti i browser HTML e CSS 3
M Pagine bianche e post visibili WordPress 20
M Pagine non visibili su dispositivi mobili. HTML e CSS 1
L file flash non visibili Flash 1
M Come nascondere la finestra di dialogo di conferma? HTML e CSS 1

Discussioni simili