Funzione per mostrare e nascondere elementi nella pagina

[J.Lankart]

Ciao!!
nella mia bella paginetta in html ho 3 livellini da dover mostrare e nascondere uno di seguito all'altro tramite dei pulsanti per scorrere una mini gallery di oggetti.

Sto provando a scrivere la funzione, ma fino a quando si tratta di mettere in "block" e "none" due soli elementi tutto ok, ma come aggiungo il terzo "ovviamente" non mi va.

dei tre elementi, il n°1 da css parte con il display block e gli altri due invece con il none.

cliccando la prima volta per l'avanzamento delle pagine pare che riesco a mostrare il sedondo div e nascondere il primo, ma se ri-clicco non mi va avanti.

Doves sbaglio? sarà di sicuro un errore orrendo ma non lo vedo!
Qualcuno mi sa aiutare?

Grazie!
Sotto la pseudofunzione!


function mostra(){
if(document.getElementById("product-color-info-pag1").style.display = 'block')
{
document.getElementById("product-color-info-pag1").style.display = 'none';
document.getElementById("product-color-info-pag2").style.display = 'block';
document.getElementById("product-color-info-pag3").style.display = 'none';
}
else if(document.getElementById("product-color-info-pag2").style.display = 'block')
{
document.getElementById("product-color-info-pag1").style.display = 'none';
document.getElementById("product-color-info-pag2").style.display = 'none';
document.getElementById("product-color-info-pag3").style.display = 'block';
}

}

[carlomarx]

http://forum.html.it/forum/showthrea...7#post13786177

[J.Lankart]

che carino!! (metto da parte! ihih)

ma non è possibile farlo tramite js?
in altre pagine ho gia piccole gallery con due div che non danno problemi, e solo per questa in realtà cambiare metodo un po mi "scoccia"!

[cavicchiandrea]

if(document.getElementById("product-color-info-pag1").style.display == 'block') confronto ==

[J.Lankart]

Ho provato ma non funziona

cosi' giusto?

function mostra(){
if(document.getElementById("product-color-info-pag1").style.display == 'block')
{
document.getElementById("product-color-info-pag1").style.display = 'none';
document.getElementById("product-color-info-pag2").style.display = 'block';
document.getElementById("product-color-info-pag3").style.display = 'none';
}
else if(document.getElementById("product-color-info-pag2").style.display == 'block')
{
document.getElementById("product-color-info-pag1").style.display = 'none';
document.getElementById("product-color-info-pag2").style.display = 'none';
document.getElementById("product-color-info-pag3").style.display = 'block';
}

}

[J.Lankart]

allora, alla fine ho risolto in maniera barbara facendo così:

ho duplicato le funzioni mostra e nascondi e duplicato i livelli con le "frecce direzionali" (left e right) sulla pagina, in modo da far comparire per ognuna delle due frecce, un duplicato sopra ed esattamente nello stesso punto, per poter alla fine assegnare la seconda funzione mostra2 e nascondi2 all'elemento input type image incaricato di lanciare lo scriptino.

Dopo un pomeriggio perso a sbattermi per una if ho purtroppo dovuto fare così, ma se qualcuno ne sa di pu e vuole correggermi magari torna buono a che per altri.




function mostra() {
document.getElementById("product-color-info-pag1").style.display="none";
document.getElementById("product-color-info-pag2").style.display="block";
document.getElementById("right2").style.display="b lock";
document.getElementById("right").style.display="no ne";
}

function nascondi() {
document.getElementById("product-color-info-pag1").style.display="block";
document.getElementById("product-color-info-pag2").style.display="none";
document.getElementById("right2").style.display="n one";
document.getElementById("right").style.display="bl ock";
}


function mostra2() {
document.getElementById("product-color-info-pag2").style.display="none";
document.getElementById("product-color-info-pag3").style.display="block";
document.getElementById("left").style.display="non e";
document.getElementById("left2").style.display="bl ock";
}


function nascondi2() {
document.getElementById("product-color-info-pag3").style.display="none";
document.getElementById("product-color-info-pag2").style.display="block";
document.getElementById("left2").style.display="no ne";
document.getElementById("left").style.display="blo ck";
}