Pourquoi mes onglets jQuery ne fonctionnent-ils pas correctement dans mon CMS ?

Comment créer des onglets simples avec jQuery

Problème : Vous avez implémenté des onglets sur votre site Web à l'aide de jQuery, mais ils ne fonctionnent pas correctement dans un CMS sur mesure. Sans JavaScript, les onglets agissent comme des liens de saut, mais avec lui, le contenu des onglets ne s'affiche pas.

Entrée fournie :

• HTML code pour les onglets :

  <code class="html"><ul id="tabs">
  <li><a href="#tab1">test1</a></li>
  <li><a href="#tab2">test2</a></li>
  ...
  </ul>
  ...
  <div class="container" id="tab1">Some content</div>
  ...</code>

  Copier après la connexion

• Code jQuery :

  <code class="javascript">$('#tabs li a:not(:first)').addClass('inactive');
  $('.container').hide();
  $('.container:first').show();
  ...</code>

  Copier après la connexion

Solution modifiée :

La solution fournie suppose que cliquer sur le href d'un onglet recharge le site Web. Pour résoudre ce problème, les attributs href ont été supprimés et le gestionnaire de clics a été révisé :

JQuery mis à jour :

<code class="javascript">$('#tabs li a').click(function() {
  var t = $(this).attr('id');

  if ($(this).hasClass('inactive')) { // Start of the condition
    $('#tabs li a').addClass('inactive');
    $(this).removeClass('inactive');

    $('.container').hide();
    $('#' + t + 'C').fadeIn('slow');
  }
});</code>

Marquage HTML révisé :

<code class="html"><ul id="tabs">
  <li><a id="tab1">test1</a></li>
  <li><a id="tab2">test2</a></li>
  ...
</ul>
...
<div class="container" id="tab1C">1Some content</div>
...</code>

Avec ces changements, que vous cliquiez sur les onglets avec ou sans JavaScript activé, le site Web gérera correctement la navigation.

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!