Comment créer des onglets simples avec jQuery ?

Lors de la création d'onglets sur un site Web, vous pouvez rencontrer des problèmes avec des liens de saut qui ne fonctionnent pas dans certains Systèmes CMS. Cela peut empêcher le contenu des onglets de s'afficher comme prévu. Pour résoudre ce problème, il est important de s'assurer que le code HTML et jQuery sont correctement implémentés.

Considérons le code HTML suivant :

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

Et le code jQuery suivant :

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

Dans ce cas, le problème semble provenir de l'attribut href des balises d'ancrage. Lorsque l'utilisateur clique sur un onglet, l'attribut href dirige le navigateur vers une section spécifique de la page à l'aide de liens de saut. Étant donné que les liens de saut ne fonctionnent pas dans votre CMS, le contenu des onglets ne s'affiche pas correctement.

Pour résoudre ce problème, nous pouvons modifier l'attribut href pour utiliser un identifiant au lieu d'un nom de section. De plus, nous devons mettre à jour le code jQuery pour utiliser l'attribut id afin d'afficher le contenu correct de l'onglet.

Voici le code HTML mis à jour :

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

Et le jQuery mis à jour :

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

En utilisant les identifiants et en ajustant le code jQuery pour utiliser l'attribut id, nous pouvons garantir que le contenu correct de l'onglet s'affiche lorsque l'utilisateur clique sur un onglet, même lorsque les liens de saut sont désactivés.