efecto solo afecta al primero

[dhayzon]

asi es tengo el sigueinte codigp

Código HTML:

<div class="tabs_poster_club_dhayzone"><div class="tabs_container">
    <ul class="tabs">
        <li class="active"><a href="#tab1"><img src="/img_styles/20130715050532294.png" alt="Citar" width="16" height="16" original-title="Citar"></a></li>
        <li><a class="icon_accept" href="#tab2"><img src="/img_styles/20130715050532294.png" alt="Citar" width="16" height="16" original-title="Citar"></a></li>
        <li><a href="#tab3"><img src="/img_styles/20130715050532294.png" alt="Citar" width="16" height="16" original-title="Citar"></a></li>
        </ul>
    </div>
 
    <div class="tabs_content_container">
    <div id="tab1" class="tab_content" style="display: block;">
        <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>
    </div>
    <div id="tab2" class="tab_content">
        <p>This tab has icon in it.</p>
    </div>
    <div id="tab3" class="tab_content">
        <p>Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p>
    </div>
</div></div>
 

& jquery

Código Javascript:

$(document).ready(function(){
    //  When user clicks on tab, this code will be executed
    $(".tabs li").click(function() {
        //  First remove class "active" from currently active tab
        $(".tabs li").removeClass('active');
 
        //  Now add class "active" to the selected/clicked tab
        $(this).addClass("active");
 
        //  Hide all tab content
        $(".tab_content").hide();
 
        //  Here we get the href value of the selected tab
        var selected_tab = $(this).find("a").attr("href");
 
        //  Show the selected tab content
        $(selected_tab).fadeIn();
 
        //  At the end, we add return false so that the click on the link is not executed
        return false;
    });
});
 

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

[David]

Podrías probar algo como esto:

Código Javascript:

$(document).ready(function(){
    //  When user clicks on tab, this code will be executed
    $(".tabs li").click(function() {
        //  First remove class "active" from currently active tab
        $(this).siblings().removeClass('active').each(function() {
            // Hide all tab content
            var current_tab = $(this).find("a").attr("href");
            $(current_tab).hide();
        });
 
        //  Now add class "active" to the selected/clicked tab
        $(this).addClass("active");
 
        //  Here we get the href value of the selected tab
        var selected_tab = $(this).find("a").attr("href");
 
        //  Show the selected tab content
        $(selected_tab).fadeIn();
 
        //  At the end, we add return false so that the click on the link is not executed
        return false;
    });
});
 

[dhayzon]

ok amigo lo probare gracias por la respuesta