W3.CSS- Navigationsregisterkarten
London
London ist die Hauptstadt von England.
Es ist die bevölkerungsreichste Stadt im Vereinigten Königreich mit einem Ballungsraum von über 9 Millionen Einwohnern.
Tab-Navigation
Tabbed Navigation ist eine Möglichkeit, auf einer Website zu navigieren.
Normalerweise verwendet die Registerkartennavigation Navigationsschaltflächen (Registerkarten), die zusammen angeordnet sind, wobei die ausgewählte Registerkarte hervorgehoben ist.
Dieses Beispiel verwendet Elemente mit demselben Klassennamen ("city" in unserem Beispiel) und ändert den Stil zwischen display:none und display:block , um unterschiedliche Inhalte auszublenden und anzuzeigen:
Beispiel
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
of England.</p>
</div>
<div id="Paris" class="city" style="display:none">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city" style="display:none">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
Und einige anklickbare Schaltflächen zum Öffnen des Inhalts mit Registerkarten:
Beispiel
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button"
onclick="openCity('London')">London</button>
<button
class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>
Und ein JavaScript, um die Arbeit zu erledigen:
Beispiel
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
JavaScript erklärt
Die Funktion openCity() wird aufgerufen, wenn der Benutzer auf eine der Schaltflächen im Menü klickt.
Die Funktion blendet alle Elemente mit dem Klassennamen "Stadt" ( display="none" ) aus und zeigt das Element mit dem angegebenen Stadtnamen an ( display="block" );
Schließbare Registerkarten
London
London ist die Hauptstadt von England.
Um einen Tab zu schließen, fügen Sie onclick="this.parentElement.style.display='none'" zu einem Element innerhalb des Tab-Containers hinzu:
Beispiel
<div id="London" class="w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">X</span>
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
Registerkarte „Aktiv/Aktuell“.
Um die aktuelle Registerkarte/Seite hervorzuheben, auf der sich der Benutzer befindet, verwenden Sie JavaScript und fügen Sie dem aktiven Link eine Farbklasse hinzu. Im folgenden Beispiel haben wir jedem Link eine "Tablink"-Klasse hinzugefügt. Auf diese Weise ist es einfach, alle Links zu erhalten, die mit Tabs verknüpft sind, und dem aktuellen Tab-Link eine „w3-red“-Klasse zuzuweisen, um ihn hervorzuheben:
Beispiel
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i =
0; i < x.length; i++) {
x[i].style.display
= "none";
}
tablinks =
document.getElementsByClassName("tablink");
for (i =
0; i < x.length; i++) {
tablinks[i].className =
tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display =
"block";
evt.currentTarget.className += "
w3-red";
}
Vertikale Registerkarten
Beispiel
<nav class="w3-sidebar w3-bar-block w3-light-grey" style="width:130px">
<button class="w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</nav>
Animierter Tab-Inhalt
Verwenden Sie eine der w3-animate- Klassen , um Tab-Inhalte einzublenden, zu zoomen oder einzuschieben:
Beispiel
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Bildergalerie mit Registerkarten
Klicken Sie auf ein Bild:
Beispiel
<a href="#" class="w3-hover-opacity" onclick="openImg('Nature');">
<img src="img_nature.jpg" alt="Nature">
</a>
<div id="Nature" class="picture w3-display-container">
<img
src="img_nature_wide.jpg" alt="Nature" style="width:100%">
<span onclick="this.parentElement.style.display='none'"
class="w3-display-topright">×</span>
<div
class="w3-display-bottomleft w3-container">Nature</div>
</div>
Registerkarten in einem Raster
Verwenden von Registerkarten in einem dritten Spaltenlayout. Beachten Sie, dass wir der aktiven Registerkarte anstelle einer Hintergrundfarbe einen unteren Rand hinzufügen: