it-zeugs-default

HTML / CSS: Tabulator-Menüs (Reiter-Menüs) auf einer Website realisieren

von

Zuletzt aktualisiert am 25. Dezember 2023 von Lars

Tabulator-Menüs finden sich recht häufig auf einer Website. Ein gängiges Beispiel ist ein Online-Shop, für den unter dem eigentlichen Artikel die Tabulatoren "Beschreibung", "Technische Daten", "Bewertung" und "Zubehör" zu finden sind.

Googelt man hier nach Lösungshinweisen, findet man viele ältere Hinweise, die nicht mehr ganz "State of the Art" sind. Eine gängige Umsetzung ist, die ganzen Daten per HTML vorzuladen, die einzelnen Inhalte in divs zu packen und diese mittels Javascript (genauer mit jquery) einzublenden.

Was ist jquery?

jquery ist eine freie JavaScript Bibliothek, die dyanmische Änderungen und Manipulationen der HTML-Dokumentstruktur ermöglicht. Vereinfacht gesagt, kann ich damit Elemente einer HTML-Seite ein und ausblenden.

Umsetzung

Ich habe eine sehr gute englischsprachige Anleitung bei Inspirationpixels.com von Seb Kay gefunden. Bei meiner Umsetzung habe ich mich weitgehend an seine gehalten.

Zuerst der HTML-Code:

<!DOCTYPE html> 
<html> 
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="p.css" type="text/css" media="screen" />


</head>
<body>
<script src="jquery-1.11.1.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function() {
$('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = $(this).attr('href');

// Show/Hide Tabs
$('.tabs ' + currentAttrValue).show().siblings().hide();

// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');

e.preventDefault();
});
});

</script> 

<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">Info</a></li>
<li><a href="#tab2">Technische Daten</a></li>
<li><a href="#tab3">Bewertungen</a></li>
<li><a href="#tab4">Zubehör</a></li>
</ul>

<div class="tab-content">
<div id="tab1" class="tab active">
<h2>Info</h2>
<p>Dies ist ein tolles, wunderbares Produkt, mit ganz viel Möglichkeiten.</p>
</div>

<div id="tab2" class="tab">
<h2>Technische Daten</h2>
<ul>
<li>CPU: 2000 </li>
<li>RAM: 4 GB </li>
<li>Schnittstellen: - </li>
<li>Masse: 10x10x10 cm</li>
<li>Gewicht: 10 kg</li>
</ul>
</div>

<div id="tab3" class="tab">
<h2>Bewertungen</h2>
<ul>
<li>Toll. Ich liebe es :-)</li>
<li>Mist. :-(</li>
<li>Nicht zu gebrauchen</li>
<li>Super :-)</li>
</ul>
</div>

<div id="tab4" class="tab">
<h2>Zubehör</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita 
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem 
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos 
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</body>
</html>

Die einzelnen Tabüberschriften sind also via Aufzählung realisiert. Die Inhalte sind in DIVs gepackt. Das erste, aktive Tab, erhält die Klasse "tab active", alle anderen "tab".

CSS

Ohne CSS sind das natürlich noch nach nichts aus.

.tabs {
width:100%;
display:inline-block;
}
.tab-links:after {
display:block;
clear:both;
content:'';
}

.tab-links li {
margin:0px 5px;
float:left;
list-style:none;
}

.tab-links a {
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:white;
border: 1px solid black;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}

.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}

li.active a, li.active a:hover {
background:lightgrey;
color:#4c4c4c;
}

.tab-content {
padding:15px;
border-radius:3px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:lightgrey;
border: 1px solid black;
}

.tab {
display:none;
}

.tab.active {
display:block;
}

display:inline-block;

erzeugt eine Box, die nach Aussen den normalen Textfluss mitmacht, im Inneren jedoch eine Block-Box darstellt. Eine guter Erklärung mit Beispiel findet sich hier.

.tab-links:after

:before und :after sind Pseudo-Elemente, die vor oder nach einem Element einen beliebigen Inhalt einfügen.

In dem nachfolgenden Bereich wird mit .tab-links die Aufzählung mit den Listenüberschriften so umgesetzt, dass sie nebeneinander und nicht mehr untereinander und ohne Aufzählungszeichen erscheint.

.tab-content

Am Schluss wird um den Inhalt noch eine schöne runde Box gezogen..

jQuery

Nun sieht das ganze zwar rechts schön aus, aber ohne jquery bewegt sich noch nichts. jQuery lädt man unter http://jquery.com/download herunter.

Eingebunden wir es mittels:

<script src="jquery-1.11.1.js" type="text/javascript"></script>

Mittels

$(document).ready(function() {

wird geprüft, ob das Dokument fertig geladen ist.

Mittels

$('.tabs .tab-links a').on('click', function(e)

wird geprüft, ob auf einen Reiter geklickt wurde.

var currentAttrValue = $(this).attr('href');

liesst den href-Wert des geklickten Links in die Variable currentAttrValue ein.

Siblings sind alle Elemente einer HTML-Seite, die den gleichen Parent haben.

Mit der Zeile

$('.tabs ' + currentAttrValue).show().siblings().hide();

schalten wir alle Tabulatoren in den umgekehrten Status.

Entsprechnd wird mit

$(this).parent('li').addClass('active').siblings().removeClass('active');

das Inhaltsdiv umgeschaltet, indem die Klasse active dazu. bzw. wieder weggenommen wird.

e.preventDefault();

schaltet das Default-Verhalten ab, was unschöne Effekte verhindert, da sonst neben dem Skript auch andere Dinge auf der Seite passieren.

Du willst meine Arbeit unterstützen? Dann freue ich mich über eine kleine Spende!

Das könnte dich auch interessieren

Schreibe einen Kommentar