Pourquoi mes liens de saut ne fonctionnent-ils pas dans l'implémentation de mon onglet jQuery ?

Comment créer des onglets simples avec jQuery : dépannage des problèmes de liens de saut

Le problème présenté concerne une implémentation de jQuery où les liens de saut ne fonctionnent pas comme prévu dans un CMS spécifique. Pour résoudre ce problème, nous explorons une solution alternative qui maintient la fonctionnalité en présence de JS.

Code révisé :

Le code jQuery mis à jour est le suivant :

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

Marquage modifié :

Le balisage HTML a également été révisé :

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

Solution :

Ce code révisé élimine le problème des liens de saut en utilisant une méthode différente pour gérer l'événement de clic. L'attribut id de l'ancre () est utilisé pour déterminer le div du contenu cible (identifié par l'attribut id se terminant par C). Cela permet au contenu souhaité d'être affiché de manière transparente avec et sans JS activé.

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!