html/jquery tudo numa mistela xD

mistear123

Power Member
Boas Pessoal tenho uma duvida numa pagina que me começa a irritar e nao sei o que esta mal :P

supostamente eu tenho 3 divs com imagens de fundo e quando eu clico nos divs deveria aparecer um div escondido em baixo, e quando clicasse noutro esse desaparecia e aparecia outro

o codigo que tenho e o seguinte:

este codigo no w3school funciona
<!DOCTYPE html><html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "#ola" ).hide();
$("button").click(function(){
$("#ola").toggle();
});
});
</script>
</head>
<body>


<div id="ola">This is a paragraph.</div>
<button>Toggle between hide() and show()</button>


</body>
</html>



mas o da minha pagina nao

html
<div id="caixa_produtos"> <a href="" id="botaoo1"><div id="caixinha1" class="esq">
<div id="caixa_image1">
<img src="image/website/impressora.png">
</div>
<div id="texto_caixinha1">1</div>
</div></a>
<a href="" id="botaoo2"><div id="caixinha2" class="esq">
<div id="caixa_image2">
<img src="image/website/POS.png">
</div>
<div id="texto_caixinha2">2</div>
</div></a>
<a href="" id="botaoo3"><div id="caixinha3" class="esq">
<div id="caixa_image3">
<img src="image/website/consumiveis.png">
</div>
<div id="texto_caixinha3">3</div>
</div></a>
</div>
<div id="caixinha_escondida1">
1
</div>
<div id="caixinha_escondida2">
2
</div>
<div id="caixinha_escondida3">
3

</div>

no script
<script>

$(document).ready(function() {

$("#caixinha_escondida1").hide();
$("#caixinha_escondida2").hide();
$("#caixinha_escondida3").hide();

$( "#botaoo1" ).click(function() {
if(x=2||x=3)
{
$( "#caixinha_escondida2" ).hide();
$( "#caixinha_escondida3" ).hide();
}else
{
$( "#caixinha_escondida1" ).toggle();
x=1;
}
});

$( "#botaoo2" ).click(function() {
if(x=1||x=3)
{
$( "#caixinha_escondida1" ).hide();
$( "#caixinha_escondida3" ).hide();
}else
{
$( "#caixinha_escondida2" ).toggle();
x=2;
}
});
$( "#botaoo3" ).click(function() {
if(x=1||x=2)
{
$( "#caixinha_escondida1" ).hide();
$( "#caixinha_escondida2" ).hide();
}else
{
$( "#caixinha_escondida3" ).toggle();
x=3;
}
});


});
</script>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="site.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>

o que me esta a escapar????
 
Qual o browser que usas?
Pessoalmente uso o chrome que ajuda bastante no desenvolvimento, principalmente no que toca ao javascript.
Se usares o chrome, abrire o teu exemplo, carregas no f12 (developer tools) e vês logo que tens um erro no código:Uncaught ReferenceError: Invalid left-hand side in assignment
Os iguais em javascript são == ou === um compara o valor e outro a referencia se nao me engano.
ao corrigires isso já deve funcionar qualquer coisa
 
$("#caixinha_escondida1").hide();
$("#caixinha_escondida2").hide();
$("#caixinha_escondida3").hide();

$( "#botaoo1" ).click(function() {
if(x==2||x==3)
{
$("#caixinha_escondida2" ).css({visibility:hidden;});
$("#caixinha_escondida3" ).css({visibility:hidden;});
}else
{
$("#caixinha_escondida1" ).css({visibility:normal;});}
x=1;

});

$( "#botaoo2" ).click(function() {
if(x==1||x==3)
{
$( "#caixinha_escondida1" ).hide();
$( "#caixinha_escondida3" ).hide();
}else
{
$( "#caixinha_escondida2" ).toggle();
x=2;
}
});
$( "#botaoo3" ).click(function() {
if(x==1||x==2)
{
$( "#caixinha_escondida1" ).hide();
$( "#caixinha_escondida2" ).hide();
}else
{
$( "#caixinha_escondida3" ).toggle();
x=3;
}
});
ficaria assim?
 
há formas melhores de o fazer, mas cria um ficheiro .html e cola este codigo e ve a funcionar

Código:
<!DOCTYPE html>
<html>
<head>
    <title>titulo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


</head>
<body>


    <div id="caixa_produtos">
        <a href="#" id="botaoo1" class="btn" >
            <div id="caixinha1" class="esq">
                <div id="caixa_image1">
                    <img src="http://png-4.findicons.com/files/icons/75/i_like_buttons_3a/512/cute_ball_standby.png" width="20" height="20">
                </div>
                <div id="texto_caixinha1">t1</div>
            </div>
        </a>
        <a href="#" id="botaoo2" class="btn">
            <div id="caixinha2" class="esq">
                <div id="caixa_image2">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/a/a5/Ball_icon.png" width="20" height="20">
                </div>
                <div id="texto_caixinha2">t2</div>
            </div>
        </a>
        <a href="#" id="botaoo3" class="btn">
            <div id="caixinha3" class="esq">
                <div id="caixa_image3">
                    <img src="http://icons.iconarchive.com/icons/icons-land/vista-style-emoticons/256/Study-icon.png" width="20" height="20">
                </div>
                <div id="texto_caixinha3">t3</div>
            </div>
        </a>
    </div>
    <div id="caixinha_escondida1" class="botaoo1 esconder">
        h1
    </div>
    <div id="caixinha_escondida2" class="botaoo2 esconder">
        h2
    </div>
    <div id="caixinha_escondida3" class="botaoo3 esconder">
        h3


    </div>


    <script>
        $(document).ready(function () {
            $(".esconder").hide();


            $(".btn").click(function () {
                $(".esconder").hide();
                $("."+$(this)[0].id).show();
            });
        });
    </script>
</body>
</html>
 
Back
Topo