W3.CSS- navigatietabbladen
Londen
Londen is de hoofdstad van Engeland.
Het is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 9 miljoen inwoners.
Navigatie met tabbladen
Navigatie met tabbladen is een manier om door een website te navigeren.
Normaal gesproken gebruikt navigatie met tabbladen navigatieknoppen (tabs) die samen met het geselecteerde tabblad zijn gemarkeerd.
Dit voorbeeld gebruikt elementen met dezelfde klassenaam ("stad" in ons voorbeeld) en verandert de stijl tussen display:none en display:block om verschillende inhoud te verbergen en weer te geven:
Voorbeeld
<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>
En enkele klikbare knoppen om de inhoud met tabbladen te openen:
Voorbeeld
<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>
En een JavaScript om het werk te doen:
Voorbeeld
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 uitgelegd
De functie openCity() wordt aangeroepen wanneer de gebruiker op een van de knoppen in het menu klikt.
De functie verbergt alle elementen met de klassenaam "city" ( display="none" ), en toont het element met de gegeven stadsnaam ( display="block" );
Afsluitbare tabbladen
Londen
Londen is de hoofdstad van Engeland.
Om een tabblad te sluiten, voegt u onclick="this.parentElement.style.display='none'" toe aan een element in de tabcontainer:
Voorbeeld
<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>
Actief/huidig tabblad
Om het huidige tabblad/de huidige pagina waarop de gebruiker zich bevindt te markeren, gebruikt u JavaScript en voegt u een kleurklasse toe aan de actieve link. In het onderstaande voorbeeld hebben we aan elke link een "tablink"-klasse toegevoegd. Op die manier is het gemakkelijk om alle links die aan tabbladen zijn gekoppeld op te halen en de huidige tabbladlink een "w3-rode" klasse te geven om deze te markeren:
Voorbeeld
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";
}
Verticale tabbladen
Voorbeeld
<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>
Geanimeerde tabbladinhoud
Gebruik een van de w3-animate- classes om de inhoud van tabbladen te vervagen, in te zoomen of in te schuiven:
Voorbeeld
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Afbeeldingengalerij met tabbladen
Klik op een afbeelding:
Voorbeeld
<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>
Tabbladen in een raster
Tabbladen gebruiken in een derde kolomlay-out. Merk op dat we een onderrand toevoegen aan het actieve tabblad, in plaats van een achtergrondkleur: