¿Cómo crear pestañas simples con jQuery?

Question

Tengo el siguiente código: fiddle

que trabaja muy bien en sitios web Creo mi mismo y sin JS el acto pestañas como enlaces de salto a las secciones pertinentes. Cuando lo coloco en el CMS personalizado, me veo obligado a utilizarlo en el momento en que los enlaces de salto no funcionen. He intentado agregar más enlaces relativos a las pestañas que lo hacen funcionar sin JS pero con JS no se muestra el contenido con pestañas.

¿Echo de menos algo?

html:

<ul id="tabs"> 

     <li><a href="#tab1">test1</a></li> 
     <li><a href="#tab2">test2</a></li> 
     <li><a href="#tab3">test3</a></li> 
     <li><a href="#tab4">test4</a></li> 

</ul> 
     <div class="container" id="tab1">Some content</div> 
     <div class="container" id="tab2">Some content</div> 
     <div class="container" id="tab3">Some content</div> 
     <div class="container" id="tab4">Some content</div> 

jQuery:

$('#tabs li a:not(:first)').addClass('inactive'); 
$('.container').hide(); 
$('.container:first').show(); 
$('#tabs li a').click(function(){ 
    var t = $(this).attr('href'); 
    $('#tabs li a').addClass('inactive');   
    $(this).removeClass('inactive'); 
    $('.container').hide(); 
    $(t).fadeIn('slow'); 
    return false; 
}) 

if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');   
    $(this).removeClass('inactive'); 
    $('.container').hide(); 
    $(t).fadeIn('slow');  
} 

Answer 1

estoy adivinando su sitio web está teniendo problemas con href, supongo que cuando el usuario hace clic en un href, página web erradicar automáticamente .

Here is new solution's jsFiddle.

tengo una nueva solución para usted:

actualización jQuery:

$('#tabs li a').click(function(){ 
    var t = $(this).attr('id'); 

    if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');   
    $(this).removeClass('inactive'); 

    $('.container').hide(); 
    $('#'+ t + 'C').fadeIn('slow'); 
} 
}); 

---

nuevo Formato HTML:

<ul id="tabs"> 

     <li><a id="tab1">test1</a></li> 
     <li><a id="tab2">test2</a></li> 
     <li><a id="tab3">test3</a></li> 
     <li><a id="tab4">test4</a></li> 

</ul> 
<div class="container" id="tab1C">1Some content</div> 
<div class="container" id="tab2C">2Some content</div> 
<div class="container" id="tab3C">3Some content</div> 
<div class="container" id="tab4C">4Some content</div> 

Answer 2

$(document).ready(function() { 
$("#content div").hide(); // Initially hide all content 
$("#tabs li:first").attr("id","current"); // Activate first tab 
$("#content div:first").fadeIn(); // Show first tab content 
$('#tabs li a').click(function(e) { 
    e.preventDefault(); 
    if ($(this).attr("id") == "current"){ //detection for current tab 
    return  
    } 
    else{    
    $("#content div").hide(); //Hide all content 
    $("#tabs li").attr("id",""); //Reset id's 
    $(this).parent().attr("id","current"); // Activate this 
    $($(this).attr('href')).fadeIn(); // Show content for current tab 
    } 
}); 

});

Ver Demo: http://jsfiddle.net/pradeepk00786/5ezT3/

Answer 3

<script> 
$('.tabheading li').click(function() { 
     var tabid = $(this).attr("rel"); 
     $(this).parents('.tabcontainer').find('.active').removeClass('active'); 
     $('.tabbody').hide(); 
     $('#' + tabid).show(); 
     $(this).addClass('active'); 

     return false; 
    }); 
</script> 

Haga clic here

Answer 4

Solución jsFiddle ::https://jsfiddle.net/incorelabs/mg6e4ren/

La implementación de aquí es muy simple, he modificado el código HTML de tu pregunta un poco. Se eliminaron las etiquetas de anclaje porque no son necesarias.

HTML

<ul> 
    <li class="tab-switcher" data-tab-index="0">test1</li> 
    <li class="tab-switcher" data-tab-index="1">test2</li> 
    <li class="tab-switcher" data-tab-index="2">test3</li> 
    <li class="tab-switcher" data-tab-index="3">test4</li> 
</ul> 
<div id="allTabsContainer"> 
    <div class="tab-container" data-tab-index="0">Some content - 1</div> 
    <div class="tab-container" data-tab-index="1" style="display:none;">Some content - 2</div> 
    <div class="tab-container" data-tab-index="2" style="display:none;">Some content - 3</div> 
    <div class="tab-container" data-tab-index="3" style="display:none;">Some content - 4</div> 
</div> 

HTML De-Mystified

1. Añadir la clase "tab-switcher" para cada elemento "li".
2. Otorgue un atributo "data-tab-index" a cada "li".
3. Agregue la clase "contenedor de pestañas" a cada contenedor con pestañas. Proporcione también un atributo "índice de tabulación de datos" para cada contenedor que corresponda al atributo "índice de tabulación de datos" en el elemento "li".
4. Muestre solo el contenedor que desea que sea visible, oculte los otros con "display: none".
5. Proporcione un contenedor principal para todo el contenido de los contenedores con pestañas. En este ejemplo, este es el div "allTabsContainer".

jQuery

$(document).ready(function() { 

    var previousActiveTabIndex = 0; 

    $(".tab-switcher").on('click', function() { 

     var tabClicked = $(this).data("tab-index"); 

     if(tabClicked != previousActiveTabIndex) { 

      $("#allTabsContainer .tab-container").each(function() { 

       if($(this).data("tab-index") == tabClicked) { 

        $(".tab-container").hide(); 
        $(this).show(); 
        previousActiveTabIndex = $(this).data("tab-index"); 
        return; 

       } 
      }); 
     } 
    }); 
}); 

jQuery De-Mystified

1. El oyente clic en la pestaña "-switcher" se inicializa en "document.ready" .
2. La variable "previousActiveTabIndex" mantiene una pista de la pestaña activa anterior de modo que si presionamos la misma pestaña una y otra vez, se puede ignorar.
3. Ejecutamos CADA bucle en el "contenedor de pestañas". Esto se hace para saber qué pestaña se debe mostrar. Si el atributo de datos "data-tab-index" en cada coincidencia, mostramos esa pestaña.
4. Mantenemos el valor del "índice de tabulación de datos" guardado en "previousActiveTabIndex", que nos ayuda a mantener un registro de la pestaña anterior en la que se hizo clic.

Si hay dudas o si alguien tiene alguna sugerencia, no comente en la publicación.

Answer 5

Incluir jQuery:

https://code.jquery.com/jquery-3.1.1.min.js 

HTML:

<br> 
<div align="center" > 
    <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-1" class="btn btn-info" >Tab 1</button> 
    <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-2" class="btn btn-info" >Tab 2</button> 
    <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-3" class="btn btn-info" >Tab 3</button> 
</div> 
<br /> 
<div class="gtabs demo" > 
    <div class="gtab active tab-1"> 
    <h1>Gtab 1</h1> 
    <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-2" class="ui button" >Tab 2</button> 
    </div> 

    <div class="gtab tab-2"> 
    <h1>Gtab 2</h1> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipiscelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut dolelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut dolelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut doli debitis similique, nostrum provident ut dolore. 
    </p> 
    </div> 

    <div class="gtab tab-3"> 
    <h1>Gtab 3</h1> 
    </div> 
</div> 
<p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi consequatur qui nostrum deleniti, quaerat. Voluptate quisquam nulla, sit error, quas mollitia sint veniam at rem corporis dolore, eaque sapiente qui. 
</p> 

CSS:

.gtabs { 
    position: relative; 
    .gtab { 
    background: #eee; 
    position: absolute; 
    width: 100%; 
    opacity: 0; 
    visibility: hidden; 
    padding: 10px; 
    top: 5px; 
    transition: all 0.4s; 
    &.active { 
     opacity: 1; 
     visibility: visible; 
     top: 0; 
     transition: all 0.4s; 
    } 
    } 
} 

JS:

$("[data-toggle='tab']").click(function() { 
    var tabs = $(this).attr('data-tabs'); 
    var tab = $(this).attr("data-tab"); 
    $(tabs).find(".gtab").removeClass("active"); 
    $(tabs).find(tab).addClass("active"); 
}); 

artículo: http://www.wapgee.com/story/i/201 Demostración: http://codepen.io/iksdatoo/pen/NjOZrm