Arbeiten mit Tabs in jQuery
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:
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn