Foros del Web » Programando para Internet » Jquery »

efecto solo afecta al primero

Estas en el tema de efecto solo afecta al primero en el foro de Jquery en Foros del Web. asi es tengo el sigueinte codigp @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < div class = "tabs_poster_club_dhayzone" >< div class = "tabs_container" >     ...
  #1 (permalink)  
Antiguo 15/07/2013, 13:37
Avatar de dhayzon  
Fecha de Ingreso: abril-2013
Ubicación: mx
Mensajes: 64
Antigüedad: 10 años, 11 meses
Puntos: 0
efecto solo afecta al primero

asi es tengo el sigueinte codigp

Código HTML:
Ver original
  1. <div class="tabs_poster_club_dhayzone"><div class="tabs_container">
  2.     <ul class="tabs">
  3.         <li class="active"><a href="#tab1"><img src="/img_styles/20130715050532294.png" alt="Citar" width="16" height="16" original-title="Citar"></a></li>
  4.         <li><a class="icon_accept" href="#tab2"><img src="/img_styles/20130715050532294.png" alt="Citar" width="16" height="16" original-title="Citar"></a></li>
  5.         <li><a href="#tab3"><img src="/img_styles/20130715050532294.png" alt="Citar" width="16" height="16" original-title="Citar"></a></li>
  6.         </ul>
  7.     </div>
  8.  
  9.     <div class="tabs_content_container">
  10.     <div id="tab1" class="tab_content" style="display: block;">
  11.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.</p>
  12.     </div>
  13.     <div id="tab2" class="tab_content">
  14.         <p>This tab has icon in it.</p>
  15.     </div>
  16.     <div id="tab3" class="tab_content">
  17.         <p>Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p>
  18.     </div>
  19. </div></div>


& jquery

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     //  When user clicks on tab, this code will be executed
  3.     $(".tabs li").click(function() {
  4.         //  First remove class "active" from currently active tab
  5.         $(".tabs li").removeClass('active');
  6.  
  7.         //  Now add class "active" to the selected/clicked tab
  8.         $(this).addClass("active");
  9.  
  10.         //  Hide all tab content
  11.         $(".tab_content").hide();
  12.  
  13.         //  Here we get the href value of the selected tab
  14.         var selected_tab = $(this).find("a").attr("href");
  15.  
  16.         //  Show the selected tab content
  17.         $(selected_tab).fadeIn();
  18.  
  19.         //  At the end, we add return false so that the click on the link is not executed
  20.         return false;
  21.     });
  22. });

fuente
http://www.lessthanweb.com/demo/simple-css-tabs-with-jquery/index.html



mi broblema es que yo coloco varios del codigo del primer bloque

funciona bien con uno solo.

pero si pongo el html 2 veces para tener 2 juegos de tabs


el primero funciona mas no el segundo

y cuando presiono los tambas del segundo el efecto lo hace en el primero

no s e como solucionarlo gracias
atodo aquel q quiera echarme una mano

salusos
  #2 (permalink)  
Antiguo 16/07/2013, 08:59
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 18 años, 11 meses
Puntos: 839
Respuesta: efecto solo afecta al primero

Podrías probar algo como esto:
Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     //  When user clicks on tab, this code will be executed
  3.     $(".tabs li").click(function() {
  4.         //  First remove class "active" from currently active tab
  5.         $(this).siblings().removeClass('active').each(function() {
  6.             // Hide all tab content
  7.             var current_tab = $(this).find("a").attr("href");
  8.             $(current_tab).hide();
  9.         });
  10.  
  11.         //  Now add class "active" to the selected/clicked tab
  12.         $(this).addClass("active");
  13.  
  14.         //  Here we get the href value of the selected tab
  15.         var selected_tab = $(this).find("a").attr("href");
  16.  
  17.         //  Show the selected tab content
  18.         $(selected_tab).fadeIn();
  19.  
  20.         //  At the end, we add return false so that the click on the link is not executed
  21.         return false;
  22.     });
  23. });
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 27/07/2013, 12:13
Avatar de dhayzon  
Fecha de Ingreso: abril-2013
Ubicación: mx
Mensajes: 64
Antigüedad: 10 años, 11 meses
Puntos: 0
Respuesta: efecto solo afecta al primero

ok amigo lo probare gracias por la respuesta

Etiquetas: forosdelweb
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:19.