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

Al crear pestañas en un sitio web, es posible que encuentres problemas con enlaces de salto que no funcionan en ciertos Sistemas CMS. Esto puede provocar que el contenido de las pestañas no se muestre como se esperaba. Para resolver este problema, es importante asegurarse de que el código HTML y jQuery estén implementados correctamente.

Consideremos el siguiente código HTML:

test1
  
test2
  
test3
  
test4
Some content
Some content
Some content
Some content

Y el siguiente código 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');    
}

En este caso, el problema parece estar en el atributo href de las etiquetas de anclaje. Cuando el usuario hace clic en una pestaña, el atributo href dirige el navegador a una sección específica de la página mediante enlaces de salto. Dado que los enlaces de salto no funcionan en su CMS, el contenido con pestañas no se muestra correctamente.

Para solucionar este problema, podemos cambiar el atributo href para usar una identificación en lugar de un nombre de sección. Además, necesitamos actualizar el código jQuery para usar el atributo id y mostrar el contenido correcto de la pestaña.

Aquí está el HTML actualizado:

test1
  
test2
  
test3
  
test4
Some content
Some content
Some content
Some content

Y el jQuery actualizado:

$('#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');
 }
});

Al usar ID y ajustar el código jQuery para usar el atributo id, podemos garantizar que se muestre el contenido correcto de la pestaña cuando el usuario hace clic en una pestaña, incluso cuando los enlaces de salto están deshabilitados.