Comment résoudre les problèmes de lien de saut lors de la création d'onglets jQuery dans un CMS personnalisé ?

Création d'onglets simples avec jQuery : conseils et dépannage

Lors de la construction d'onglets avec jQuery, les utilisateurs peuvent rencontrer des problèmes de dysfonctionnement des liens de renvoi lors de la mise en œuvre sur mesure CMS. Ce qui suit fournit une solution complète pour résoudre ce dilemme.

Code initial :

Considérez le code fourni dans le violon. La partie jQuery est la suivante :

$('#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')) {
  $('#tabs li a').addClass('inactive');
  $(this).removeClass('inactive');
  $('.container').hide();
  $(t).fadeIn('slow');
}

Dépannage et solution :

1. Problèmes Href :
   Le site Web peut rencontrer des difficultés avec href, provoquant un rechargement automatique en cliquant. Ce problème peut être résolu en utilisant id au lieu de href.

2. Marquage HTML mis à jour :
   Le balisage HTML modifié :

   <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>

3. JQuery mis à jour :
   La partie jQuery mise à jour :

   $('#tabs li a').click(function() {
     var t = $(this).attr('id');
   
     if ($(this).hasClass('inactive')) {
       $('#tabs li a').addClass('inactive');
       $(this).removeClass('inactive');
   
       $('.container').hide();
       $('#' + t + 'C').fadeIn('slow');
     }
   });

Implémentation :

1. Incorporez le balisage HTML mis à jour et jQuery dans votre code.
2. Assurez-vous que les ID #tabX et les ID #tabXC dans le HTML correspondent.
3. Testez la fonctionnalité de vos onglets.

En suivant ces étapes, vous pouvez créer efficacement des onglets simples et fonctionnels à l'aide de jQuery, même lorsque vous rencontrez des problèmes avec les liens de saut dans un CMS sur mesure.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!