W3.CSS Navigasie-oortjies
Londen
Londen is die hoofstad van Engeland.
Dit is die mees bevolkte stad in die Verenigde Koninkryk, met 'n metropolitaanse gebied van meer as 9 miljoen inwoners.
Tabblad-navigasie
Tabbladnavigasie is 'n manier om op 'n webwerf te navigeer.
Normaalweg gebruik oortjiesnavigasie navigasieknoppies (oortjies) wat saam gerangskik is met die geselekteerde oortjie uitgelig.
Hierdie voorbeeld gebruik elemente met dieselfde klasnaam ("stad" in ons voorbeeld), en verander die styl tussen display:none en display:block om verskillende inhoud te versteek en te vertoon:
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 'n paar klikbare knoppies om die inhoud met oortjies oop te maak:
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 'n JavaScript om die 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 verduidelik
Die openCity()- funksie word genoem wanneer die gebruiker op een van die knoppies in die kieslys klik.
Die funksie versteek alle elemente met die klasnaam "stad" ( display="none" ), en vertoon die element met die gegewe stadnaam ( display="block" );
Sluitbare oortjies
Londen
Londen is die hoofstad van Engeland.
Om 'n oortjie toe te maak, voeg onclick="this.parentElement.style.display='none'" by 'n element binne die oortjiehouer:
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>
Aktiewe/huidige oortjie
Om die huidige oortjie/bladsy waarop die gebruiker is uit te lig, gebruik JavaScript en voeg 'n kleurklas by die aktiewe skakel. In die voorbeeld hieronder het ons 'n "tablink"-klas by elke skakel gevoeg. Op hierdie manier is dit maklik om alle skakels te kry wat met oortjies geassosieer word, en die huidige oortjieskakel 'n "w3-rooi" klas te gee om dit uit te lig:
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";
}
Vertikale oortjies
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 oortjie-inhoud
Gebruik enige van die w3-animate- klasse om oortjie-inhoud te vervaag, in te zoem of in te skuif:
Voorbeeld
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Beeldgalery met oortjies
Klik op 'n prent:
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>
Oortjies in 'n rooster
Gebruik oortjies in 'n derde kolomuitleg. Let daarop dat ons 'n onderste rand by die aktiewe oortjie voeg, in plaas van 'n agtergrondkleur: