Função para alternar paineis para a frente

Mofo · Maio 27, 2009

Amigos, boa noite!

crei esta função em JavaScript e seu principal Objetivo é pegar o ID do painel que foi clicado, e trazê-lo para a frente de todos os outros... porém, ao clicar 1x em um painel do fundo, ele funciona perfeitamente, mas quando clico em qualquer outro painel, os mesmos não se movem, me limitando a apenas um clique, quando desejo alterna-los em qualquer momento.... sera que estou fazendo algo errado?? segue o codigo para analise!!!

function BringToFront(NomePainelClicado){
    var objPainelServico1 = document.getElementById('PainelServico1');
    var objPainelServico2 = document.getElementById('PainelServico2');
    var objPainelServico3 = document.getElementById('PainelServico3');
    var objPainelServico4 = document.getElementById('PainelServico4');
    var objPainelServico5 = document.getElementById('PainelServico5');  
    var ValAntPnlSelected;
    var objPnlSelected;
    
      switch(NomePainelClicado)
            {
            case 'PainelServico1':
                  ValAntPnlSelected =  objPainelServico1.style.zIndex;
                  objPnlSelected = objPainelServico1; 
                  
              break;
              
            case 'PainelServico2':
                  ValAntPnlSelected =  objPainelServico2.style.zIndex;
                  objPnlSelected = objPainelServico2;
                   
              break;
              
            case 'PainelServico3':
                  ValAntPnlSelected =  objPainelServico3.style.zIndex;
                  objPnlSelected = objPainelServico3;
                 
              break;
              
            case 'PainelServico4':
                  ValAntPnlSelected =  objPainelServico4.style.zIndex;
                  objPnlSelected = objPainelServico4;
                   
              break;
              
            case 'PainelServico5':
                  ValAntPnlSelected =  objPainelServico5.style.zIndex;
                  objPnlSelected = objPainelServico5;
                   
              break;
              
            default: break;
            }
               if(objPainelServico1.style.zIndex == 5){
                 objPnlSelected.style.zIndex = 5;
                 objPainelServico1.style.zIndex = ValAntPnlSelected;
                 
                                                    }
               if(objPainelServico2.style.zIndex == 5){
                 objPnlSelected.style.zIndex = 5;
                 objPainelServico2.style.zIndex = ValAntPnlSelected;
                 
                                                    }
                                                    
              if(objPainelServico3.style.zIndex == 5){
                 objPnlSelected.style.zIndex = 5;
                 objPainelServico3.style.zIndex = ValAntPnlSelected;
                 
                                                    }
                                                    
              if(objPainelServico4.style.zIndex == 5){
                 objPnlSelected.style.zIndex = 5;
                 objPainelServico4.style.zIndex = ValAntPnlSelected;
                 
                                                    }
                                                    
              if(objPainelServico5.style.zIndex == 5){
                 objPnlSelected.style.zIndex = 5;
                 objPainelServico5.style.zIndex = ValAntPnlSelected;
                
                                                    } 
            
}

Cardon · Maio 28, 2009

Amigo tente colocar assim

<html><head>
<title>Teste</title>

<style type="text/css">
#m1{
background-color:#00FF00;
position: absolute;
left: 20px;
top: 20px;
z-index:5;
width: 30%;
height: 191px;

}
#m2{
background-color:#FF0000;
position: absolute;
left: 40px;
top: 40px;
z-index:10;
width: 30%;
height: 191px;

}
#m3{
background-color:#0000FF;
position: absolute;
left: 60px;
top: 60px;
z-index:15;
width: 30%;
height: 191px;

}
</style>
<script>
function muda(numero){
variavel = numero;
//alert(variavel);
document.getElementsByTagName("div")[0].style.zIndex = "1";
document.getElementsByTagName("div")[1].style.zIndex = "2";
document.getElementsByTagName("div")[2].style.zIndex = "3";
document.getElementById("m"+variavel).style.zIndex = "30";
}
</script>
</head>
<body>

<a href="java script:muda(1)"><div id="m1">a</div></a>
<a href="java script:muda(2)"><div id="m2">a</div></a>
<a href="java script:muda(3)"><div id="m3">a</div></a>
</body>
</html>

deu certo

conforme vai clicando nas divs elas vão indo para trás e para frente.

Entrar

Função para alternar paineis para a frente

Pergunta

Mofo

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Cardon

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades