Warum funktionieren meine jQuery-Tabs in meinem CMS nicht richtig?

So erstellen Sie einfache Tabs mit jQuery

Problem: Sie haben Tabs auf Ihrer Website mit jQuery implementiert, aber sie funktionieren nicht richtig innerhalb eines maßgeschneiderten CMS. Ohne JavaScript fungieren die Registerkarten als Sprunglinks, aber damit wird der Inhalt der Registerkarten nicht angezeigt.

Bereitgestellte Eingabe:

• HTML Code für die Tabs:

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

• jQuery-Code:

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

Geänderte Lösung:

Die bereitgestellte Lösung geht davon aus, dass durch Klicken auf den Href eines Tabs die Website neu geladen wird. Um dieses Problem zu beheben, wurden die href-Attribute entfernt und der Click-Handler überarbeitet:

JQuery aktualisiert:

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

Überarbeitetes HTML-Markup:

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

Mit diesen Änderungen wird die Website die Navigation korrekt verarbeiten, unabhängig davon, ob Sie mit oder ohne aktiviertem JavaScript auf die Registerkarten klicken.

Das obige ist der detaillierte Inhalt vonWarum funktionieren meine jQuery-Tabs in meinem CMS nicht richtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!