HOWTO · jQuery
Arbeiten mit Tabs in jQuery
Im heutigen Beitrag werden wir kurz über Registerkarten in jQuery sprechen.
Auf dieser Seite
Im heutigen Beitrag lernen wir Tabs in jQuery kennen.
Registerkarten in jQuery
Die Tabs sind ein einzelner Inhaltsbereich mit mehreren Bereichen, denen jeweils eine Überschrift in einer Liste zugeordnet ist. Registerkarten werden normalerweise verwendet, um Inhalte in mehrere Abschnitte zu unterteilen, die wie ein Akkordeon ausgetauscht werden können, um Platz zu sparen.
Tabs haben einen ausgewählten Satz von Markups, die verwendet werden sollten, damit sie richtig funktionieren:
- Die
tabsselbst müssen sich in einer geordneten oder ungeordneten Liste befinden. - Jeder Reiter
Titelmuss sich in einem Listenelement befinden und von einem Anker mit einem zu umschließenden href-Attribut begleitet werden. - Jedes Registerkartenfeld kann ein beliebiges gültiges Element sein, muss jedoch eine ID haben, die mit dem Hash im Anker der zugehörigen Registerkarte übereinstimmt.
Der Inhalt jedes Tab-Panels kann auf der Webseite definiert oder über Ajax geladen werden; beide werden automatisch basierend auf dem href des mit der Registerkarte verknüpften Ankers behandelt. Bei Verwendung der Standardregisterkarten werden diese beim Anklicken abgesetzt.
Ereignisse können jedoch geändert werden, um den Mauszeiger über die Option Ereignisse zu bewegen. Lassen Sie es uns anhand des folgenden Beispiels verstehen.
Code - HTML:
<ul id="tabs">
<li><a id="home">Home</a></li>
<li><a id="about">About</a></li>
</ul>
<div class="container" id="homeC">Home Screen</div>
<div class="container" id="aboutC">About Us</div>
Code - CSS:
#tabs {
width: 100%;
height:30px;
border-bottom: solid 1px #CCC;
padding-right: 2px;
margin-top: 30px;
}
a {cursor:pointer;}
#tabs li {
float:left;
list-style:none;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
margin-right:5px;
border-top-left-radius:3px;
border-top-right-radius:3px;
outline:none;
}
#tabs li a {
font-family:Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
color: #5685bc;;
padding-top: 5px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 8px;
display:block;
background: #FFF;
border-top-left-radius:3px;
border-top-right-radius:3px;
text-decoration:none;
outline:none;
}
#tabs li a.inactive{
padding-top:5px;
padding-bottom:8px;
padding-left: 8px;
padding-right: 8px;
color:#666666;
background: #EEE;
outline:none;
border-bottom: solid 1px #CCC;
}
#tabs li a:hover, #tabs li a.inactive:hover {
color: #5685bc;
outline:none;
}
.container {
clear:both;
width:100%;
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
text-align:left;
padding-top: 20px;
}
.container h2 { margin-left: 15px; margin-right: 15px; margin-bottom: 10px; color: #5685bc; }
.container p { margin-left: 15px; margin-right: 15px; margin-top: 10px; margin-bottom: 10px; line-height: 1.3; font-size: small; }
.container ul { margin-left: 25px; font-size: small; line-height: 1.4; list-style-type: disc; }
.container li { padding-bottom: 5px; margin-left: 5px;}
Code - JavaScript:
$(document).ready(function() {
$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#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');
}
});
});
Im obigen Beispiel haben wir Registerkarten mit einem ul-Tag definiert, das alle Registerkarten auflistet. Der Inhalt der Registerkarten wird standardmäßig mit der Methode hide ausgeblendet, und standardmäßig ist die erste Registerkarte sichtbar.
Sobald der Benutzer auf eine beliebige Registerkarte klickt, wird die Klasse .inactive auf alle Listenelemente angewendet und die Klasse .inactive aus dem ausgewählten Listenelement entfernt. Dadurch wird sichergestellt, dass immer nur das ausgewählte Listenelement aktiviert wird.
Versuchen Sie, das obige Snippet in einem beliebigen Browser auszuführen, der jQuery unterstützt, und es wird das folgende Ergebnis angezeigt.
Ausgabe:
