Click() en jquery no reacciona, "efecto" de pestañas

Carlmycol · #1 (**permalink**) 23/01/2012, 10:22

Experimentando un poco me topé con lo siguiente, voy hacer dos pestañas con fotos de modelos y pues, el evento ready en $(document) funciona a la perfeccion mas los otros dos, no se inmutan, es decir:

$("#hombres").click ... y $("#mujeres").click
No funcionan, por alguna razón que.. no entiendo o.O

Si alguien me tiende una mano le agradceria de corazon n.n

Código HTML:

Ver original<head>
<!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">
<style type="text/css">
@font-face{  
font-family:'Futura';  
src: url('css_files/login/FuturaStd-Medium.otf') format('opentype');  
} 
 
body
{
    background:black;   
}
#top
{
    width:100%;
    height:228px;
    background:url(css_files/index/logo.png) center bottom no-repeat;
}
#wrapper
{
    width:960px;
    height:auto;
    margin:0 auto 0 auto;   
}
 
#menu, #menu ul
{
    padding:0;
    margin:0;
    list-style:none;
}
#menu ul li
{
    /* Duracion de transicion 100% a 0% */
    -webkit-transition-duration: 500ms; /* Google Chrome y Safari */
    -o-transition-duration: 500ms;      /* Opera */
    -ms-transition-duration: 500ms;     /* Internet Explorer */
    -moz-transition-duration: 500ms;    /* Mozilla Firefox */
    background:#2E2E2E;
    float:right;
    padding:10px 20px 10px 20px;
    color:white; text-decoration:none;
    font-family:'Futura', Tahoma, Geneva, sans-serif;
    letter-spacing:-1px;
    margin-left:5px;
    text-transform:uppercase;
    cursor:pointer;
}
 
#menu ul li:hover
{
        /* Duracion de transicion 100% a 0% */
    -webkit-transition-duration: 500ms; /* Google Chrome y Safari */
    -o-transition-duration: 500ms;      /* Opera */
    -ms-transition-duration: 500ms;     /* Internet Explorer */
    -moz-transition-duration: 500ms;    /* Mozilla Firefox */
    background:#8D8D8D !important;
}
</style>
<script src="css_files/jquery.js"></script>
<script>
 
    $("#content").click( function() {
 
        $("#content_mujeres").hide(500);
 
        $("#content_hombres").show(700);
 
    } );
 
    $("#mujeres").click( function() {
 
        $("#content_hombres").hide(500);
 
        $("#content_mujeres").show(700);
 
    });
    $(document).ready( function() { 
 
        $("#content_hombres").hide(300);
 
    } );
 
</script>
 
<meta content="text/html;" http-equiv="content-type" charset="utf-8">
<title>Galería</title>
</head>
<body>
     <div id="wrapper">
 
               <div id="top">
 
               </div>
      
 
               <div id="content">
                <div id="menu">
                         <ul>
                              <li id="mujeres">Mujeres</li>
                              <li id="hombres">Hombres</li>
                         </ul>
                    </div>
               </div>
 
                    
 
               <hr style="clear:both;border:0;visibility:none;">
 
                
 
               <div id="content_hombres">
                  ... </div>
 
                           
 
               <hr style="clear:both;border:0;visibility:none;">
 
               <div id="content_mujeres">
                ...</div>
 
               <hr style="clear:both;border:0;visibility:none;">
     </div>
 
</body>
 
</html>

Un saludo

Ribon · #2 (**permalink**) 23/01/2012, 10:33

Tienes que ponerlo todo dentro del document.ready

así

Código Javascript:

Ver original$(document).ready( function() { 
 
        $("#content_hombres").hide(300);
 
        $("#content").click( function() {
 
           $("#content_mujeres").hide(500);
 
           $("#content_hombres").show(700);
 
        });
 
    $("#mujeres").click( function() {
 
        $("#content_hombres").hide(500);
 
        $("#content_mujeres").show(700);
 
    });
 
    } );

porque al momento de ejecutarse los $.click() aún no existen los elementos #content ni #mujeres
en cambio dentro del document.ready te aseguras de que ya está todo el DOM cargado

saludos