Como construir guias simples com jQuery?

Ao criar guias em um site, você pode encontrar problemas com links de salto que não funcionam em determinados Sistemas CMS. Isso pode fazer com que o conteúdo das guias não seja exibido conforme o esperado. Para resolver esse problema, é importante garantir que o código HTML e jQuery sejam implementados corretamente.

Vamos considerar o seguinte código HTML:

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

E o seguinte 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');    
}

Neste caso, o problema parece estar no atributo href das tags âncora. Quando o usuário clica em uma guia, o atributo href direciona o navegador para uma seção específica da página usando links de salto. Como os links de salto não estão funcionando em seu CMS, o conteúdo das guias não está sendo exibido corretamente.

Para corrigir isso, podemos alterar o atributo href para usar um ID em vez de um nome de seção. Além disso, precisamos atualizar o código jQuery para usar o atributo id para mostrar o conteúdo correto da guia.

Aqui está o HTML atualizado:

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

E o jQuery atualizado:

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

Usando IDs e ajustando o código jQuery para usar o atributo id, podemos garantir que o conteúdo correto da guia seja exibido quando o usuário clicar em uma guia, mesmo quando os links de salto estiverem desabilitados.