JQuery não funciona

Renato Penna · Abril 1, 2011

Estou com o código abaixo e ele não funciona. A idéia é que o texto "Mostrando/escondendo texto" inicie escondido e ao clicar no link ele apareça. Mas o documento inicia com o texto aparecendo e ao clicar no link não acontece nada. O que está errado ?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery</title>
<script type="text/javascript">
$(document).ready(
   function() {
      $(".escondido").hide();
      $("a#abre").click(       
         function(event) {
            $(".escondido").show("slow"); 
            return false;
         }
      )
   }
);
</script>
</head>

<body>
    Para mostrar o texto, clique <a id="abre" href="#" onclick="mostrar();">aqui</a>
    <div class="escondido">Mostrando/escondendo texto</div>
</body>
</html>

rafaeldorazio · Abril 1, 2011

Se você não fez a referencia do Jquery no html não vai funcionar !

Tenta assim:

<script type="text/javascript">
$(document).ready(function () {
    $(".escondido").hide();
    $("a#abre").click(function (event) {
    
        $(".escondido").show("slow");
        return false;
    
    });

});
</script>



<body>
    Para mostrar o texto, clique <a id="abre" href="#">aqui</a>
    <div class="escondido">Mostrando/escondendo texto</div>
</body>

Editado Abril 1, 2011 por rafaeldorazio

Renato Penna · Abril 1, 2011

Não. Como faz ?

rafaeldorazio · Abril 1, 2011

Renato me desculpe me esqueci de colocar o ocdigo que faz a referencia.

<script src="Scripts/jquery-1.4.4.js" type="text/javascript"></script>

Colocar o codigo entre as tags head. Fiz algumas melhorias no seu codigo:

<script type="text/javascript">
$(document).ready(function () {
    $(".escondido").hide();
    $("a#abre").click(function (event) {
    
        $(".escondido").show("slow");
        return false;
    
    });

});
</script>



<body>
    Para mostrar o texto, clique <a id="abre" href="#">aqui</a>
    <div class="escondido">Mostrando/escondendo texto</div>
</body>

Editado Abril 1, 2011 por rafaeldorazio

Renato Penna · Abril 1, 2011

Valeu, funcionou. Ficou assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show/Hide com jQuery</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("h1#mostra1").toggle(
        function() {
            $("div#oculto1").fadeIn(); // ou slideDown()
        },
        function() {
            $("div#oculto1").fadeOut(); // ou slideUp()
        }
    );
});

$(document).ready(function() {
    $("h1#mostra2").toggle(
        function() {
            $("div#oculto2").fadeIn(); // ou slideDown()
        },
        function() {
            $("div#oculto2").fadeOut(); // ou slideUp()
        }
    );
});
</script>
<style type="text/css">
html {
    font: 12px Arial, Helvetica, sans-serif;
    text-align: center;
}
#conteudo, #oculto1, #oculto2 {
    background: #e5e5e5;
    width: 480px;
    margin: auto;
    padding: 10px;
    border: solid 1px #ccc;
}
#conteudo1 h1 {
    font-size: 15px;
}
#conteudo2 h1 {
    font-size: 15px;
}
#oculto1 {
    display: none;
    margin-top: 30px;
}
#oculto2 {
    display: none;
    margin-top: 30px;
}
</style>
</head>

<body>
<div id="conteudo1">
    <h1 id="mostra1">Clique aqui para exibir/ocultar um elemento</h1>

</div>

<div id="oculto1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eleifend. Mauris tincidunt lectus in libero. Suspendisse interdum lectus vitae urna. Morbi vitae enim vel justo dapibus porttitor.
</div>

<div id="conteudo2">
    <h1 id="mostra2">Clique aqui para exibir/ocultar um elemento</h1>

</div>

<div id="oculto2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eleifend. Mauris tincidunt lectus in libero. Suspendisse interdum lectus vitae urna. Morbi vitae enim vel justo dapibus porttitor.
</div>
</body>
</html>

Entrar

JQuery não funciona

Pergunta

Renato Penna

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

rafaeldorazio

Link para o comentário

Compartilhar em outros sites

Renato Penna

Link para o comentário

Compartilhar em outros sites

rafaeldorazio

Link para o comentário

Compartilhar em outros sites

Renato Penna

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades