Wie erstelle ich einfache Tabs mit jQuery?
Beim Erstellen von Tabs auf einer Website können Probleme mit Sprunglinks auftreten, die in bestimmten Fällen 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:
<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>
Und den folgenden jQuery-Code:
<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>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 eine ID anstelle eines Abschnittsnamens verwendet wird. 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:
<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>
Und der aktualisierte jQuery:
<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>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.
Das obige ist der detaillierte Inhalt vonWarum funktionieren meine Tabs in meinem CMS nicht richtig und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
