Wie erstelle ich einfache Tabs mit jQuery?

Beim Erstellen von Tabs auf einer Website kann es in bestimmten Fällen zu Problemen mit Sprunglinks kommen, die nicht funktionieren CMS-Systeme. Dies kann dazu führen, dass der Inhalt der Registerkarten nicht wie erwartet angezeigt wird. Um dieses Problem zu beheben, muss sichergestellt werden, dass der HTML- und jQuery-Code korrekt implementiert ist.

Betrachten wir den folgenden HTML-Code:

test1
  
test2
  
test3
  
test4
Some content
Some content
Some content
Some content

Und der folgende jQuery-Code:

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

In diesem Fall scheint das Problem beim href-Attribut der Ankertags zu liegen. Wenn der Benutzer auf eine Registerkarte klickt, leitet das href-Attribut den Browser mithilfe von Sprunglinks zu einem bestimmten Abschnitt der Seite. Da die Sprunglinks in Ihrem CMS nicht funktionieren, wird der Inhalt mit Registerkarten nicht korrekt angezeigt.

Um dies zu beheben, können wir das href-Attribut so ändern, dass es eine ID anstelle eines Abschnittsnamens verwendet. Darüber hinaus müssen wir den jQuery-Code aktualisieren, um das id-Attribut zu verwenden, um den korrekten Tab-Inhalt anzuzeigen.

Hier ist der aktualisierte HTML-Code:

test1
  
test2
  
test3
  
test4
Some content
Some content
Some content
Some content

Und die aktualisierte jQuery:

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

Durch die Verwendung von IDs und die Anpassung des jQuery-Codes zur Verwendung des ID-Attributs können wir sicherstellen, dass der korrekte Tab-Inhalt angezeigt wird, wenn der Benutzer auf einen Tab klickt, auch wenn Sprunglinks deaktiviert sind.