London
London ist die Hauptstadt von England.
Es ist die bevölkerungsreichste Stadt im Vereinigten Königreich, mit einem Ballungsgebiet von mehr als 13 Millionen Einwohnern.
Paris
Paris ist die Hauptstadt von Frankreich.
Die Gegend Paris ist einer der größten Ballungszentren in Europa, mit mehr als 12 Millionen Einwohnern.
Tokio
Tokio ist die Hauptstadt von Japan.
Es ist das Zentrum des größeren Tokyo-Bereich, und die bevölkerungsreichste Metropole der Welt.
Tabs (Tabulatoren)
Tabs sind für einzelne Seite Web-Anwendungen perfekt, oder für Web-Seiten der Lage verschiedene Themen angezeigt werden kann.
Erstellen Sie einfach viele Elemente mit dem gleichen Klassennamen:
Beispiel
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
city of England.</p>
</div>
<div id="Paris" class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
Dann fügen Sie einige anklickbare Tasten, um den Inhalt zu öffnen (Einzeltasten, Navigationsleiste sidenav, etc ..):
Beispiel
<ul class="w3-navbar">
<li><a href="#" onclick="openCity('London')">London</a></li>
<li><a href="#" onclick="openCity('Paris')">Paris</a></li>
<li><a href="#" onclick="openCity('Tokyo')">Tokyo</a></li>
</ul>Und einen JavaScript fügen Sie die Elemente zu wählen:
Beispiel
openCity("London");
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";
}
Versuch es selber " JavaScript erklärt
Rufen Sie zunächst Opencity () "London" (id = "London) zu öffnen.
Dann rufen Sie offene Stadt () mit einer anderen Stadt ein (id = "Paris) , wenn der Benutzer auf eine der Schaltflächen im Menü klickt.
Die Opencity () Funktion blendet alle Elemente (Display = "none") mit dem Klassennamen "Stadt" und zeigt das Element (Anzeige = "block") mit der gegebenen Stadt ID.
Aktiv / Aktuelle Tab
Wenn Sie die aktuelle Registerkarte / Seite der Benutzer ist hervorheben möchten, verwenden Sie JavaScript und fügen Sie Link, um eine bestimmte Farbe Klasse auf die aktuelle Registerkarte. Im Beispiel unten haben wir einen "tablink" Klasse zu jedem Link hinzugefügt. Auf diese Weise ist es einfach, alle Links zu erhalten, die mit Laschen verbunden ist, und geben Sie dem aktuellen Tab Link, um eine "w3-rot" Klasse, zu markieren Sie es:
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";
}
Versuch es selber " Vertical Tabs
Beispiel
<nav class="w3-sidenav w3-light-grey" style="width:130px">
<a href="#" class="tablink" onclick="openCity(event, 'London')">London</a>
<a href="#" class="tablink" onclick="openCity(event, 'Paris')">Paris</a>
<a href="#" class="tablink" onclick="openCity(event, 'Tokyo')">Tokyo</a>
</nav>
Versuch es selber " Animierte Tab Content
Verwenden Sie eine der w3-animate- Klassen zu verblassen, Zoom oder Folie in Registerkarte Inhalt:
Beispiel
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Versuch es selber " Tabbed Bildergalerie
× 
× 
× 
× Beispiel
<a href="javascript:void(0)" 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> Versuch es selber " Tabs in einem Grid
Mit Registerkarten in einer dritten Spalte Layout. Beachten Sie, dass wir eine untere Grenze auf die aktive Registerkarte hinzuzufügen, statt einer Hintergrundfarbe: