Pourquoi mes onglets ne fonctionnent-ils pas correctement dans mon CMS et comment puis-je y remédier ?

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 :

<code class="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></code>

Et le code jQuery suivant :

<code class="javascript">$('#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');    
}</code>

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 :

<code class="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">Some content</div>
<div class="container" id="tab2C">Some content</div>
<div class="container" id="tab3C">Some content</div>
<div class="container" id="tab4C">Some content</div></code>

Et le jQuery mis à jour :

<code class="javascript">$('#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');
 }
});</code>

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.

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!