Tema: Click() en jquery no reacciona, "efecto" de pestañas
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/01/2012, 10:22
Avatar de Carlmycol
Carlmycol
 
Fecha de Ingreso: diciembre-2007
Ubicación: Los Teques, Venezuela
Mensajes: 240
Antigüedad: 17 años
Puntos: 3
Click() en jquery no reacciona, "efecto" de pestañas
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
  1. <head>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <style type="text/css">
  5. @font-face{  
  6. font-family:'Futura';  
  7. src: url('css_files/login/FuturaStd-Medium.otf') format('opentype');  
  8. } 
  9.  
  10. body
  11. {
  12.     background:black;   
  13. }
  14. #top
  15. {
  16.     width:100%;
  17.     height:228px;
  18.     background:url(css_files/index/logo.png) center bottom no-repeat;
  19. }
  20. #wrapper
  21. {
  22.     width:960px;
  23.     height:auto;
  24.     margin:0 auto 0 auto;   
  25. }
  26.  
  27. #menu, #menu ul
  28. {
  29.     padding:0;
  30.     margin:0;
  31.     list-style:none;
  32. }
  33. #menu ul li
  34. {
  35.     /* Duracion de transicion 100% a 0% */
  36.     -webkit-transition-duration: 500ms; /* Google Chrome y Safari */
  37.     -o-transition-duration: 500ms;      /* Opera */
  38.     -ms-transition-duration: 500ms;     /* Internet Explorer */
  39.     -moz-transition-duration: 500ms;    /* Mozilla Firefox */
  40.     background:#2E2E2E;
  41.     float:right;
  42.     padding:10px 20px 10px 20px;
  43.     color:white; text-decoration:none;
  44.     font-family:'Futura', Tahoma, Geneva, sans-serif;
  45.     letter-spacing:-1px;
  46.     margin-left:5px;
  47.     text-transform:uppercase;
  48.     cursor:pointer;
  49. }
  50.  
  51. #menu ul li:hover
  52. {
  53.         /* Duracion de transicion 100% a 0% */
  54.     -webkit-transition-duration: 500ms; /* Google Chrome y Safari */
  55.     -o-transition-duration: 500ms;      /* Opera */
  56.     -ms-transition-duration: 500ms;     /* Internet Explorer */
  57.     -moz-transition-duration: 500ms;    /* Mozilla Firefox */
  58.     background:#8D8D8D !important;
  59. }
  60. </style>
  61. <script src="css_files/jquery.js"></script>
  62. <script>
  63.  
  64.     $("#content").click( function() {
  65.  
  66.         $("#content_mujeres").hide(500);
  67.  
  68.         $("#content_hombres").show(700);
  69.  
  70.     } );
  71.  
  72.     $("#mujeres").click( function() {
  73.  
  74.         $("#content_hombres").hide(500);
  75.  
  76.         $("#content_mujeres").show(700);
  77.  
  78.     });
  79.     $(document).ready( function() { 
  80.  
  81.         $("#content_hombres").hide(300);
  82.  
  83.     } );
  84.  
  85. </script>
  86.  
  87. <meta content="text/html;" http-equiv="content-type" charset="utf-8">
  88. <title>Galería</title>
  89. </head>
  90. <body>
  91.      <div id="wrapper">
  92.  
  93.                <div id="top">
  94.  
  95.                </div>
  96.       
  97.  
  98.                <div id="content">
  99.                 <div id="menu">
  100.                          <ul>
  101.                               <li id="mujeres">Mujeres</li>
  102.                               <li id="hombres">Hombres</li>
  103.                          </ul>
  104.                     </div>
  105.                </div>
  106.  
  107.                     
  108.  
  109.                <hr style="clear:both;border:0;visibility:none;">
  110.  
  111.                 
  112.  
  113.                <div id="content_hombres">
  114.                   ... </div>
  115.  
  116.                            
  117.  
  118.                <hr style="clear:both;border:0;visibility:none;">
  119.  
  120.                <div id="content_mujeres">
  121.                 ...</div>
  122.  
  123.                <hr style="clear:both;border:0;visibility:none;">
  124.      </div>
  125.  
  126. </body>
  127.  
  128. </html>

Un saludo