Londra
Londra este capitala Angliei.
Acesta este cel mai populat oraș din Regatul Unit, cu o zonă metropolitană de peste 13 milioane de locuitori.
Paris
Paris este capitala Frantei.
Zona din Paris este una dintre cele mai mari centre de populație din Europa, cu mai mult de 12 milioane de locuitori.
Tokyo
Tokyo este capitala Japoniei.
Acesta este centrul Tokyo zona Greater, și zona metropolitană cel mai populat din lume.
Tabs (Tabulators)
Tab-uri sunt perfecte pentru aplicații ale paginilor web unice, sau pentru pagini web capabile să afișeze diferite discipline.
Doar crea multe elemente cu același nume de clasă:
Exemplu
<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>
Apoi se adaugă niște butoane clickable pentru a deschide conținutul (butoanele unice, bara de navigare, sidenav, etc ..):
Exemplu
<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>Și adaugă un JavaScript pentru a selecta elementele:
Exemplu
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";
}
Încearcă - l singur » JavaScript pe înțelesul tuturor
În primul rând, apel openCity() pentru a deschide "London" (id="London) .
Apoi suna deschis City() cu un nume de oraș diferit (id="Paris) atunci când utilizatorul face clic pe unul dintre butoanele din meniu.
openCity() funcția ascunde toate elementele ( display="none" ) cu numele clasei "city" , și afișează elementul ( display="block" ) cu ID - ul orașului dat.
/ Fila curent Activ
Dacă doriți să evidențiați fila / pagina curentă utilizatorul se află, folosiți JavaScript și adăugați o clasă de culoare specifică link-ul fila curentă. In exemplul de mai jos, am adăugat o "tablink" clasă pentru fiecare link. În acest fel, este ușor pentru a obține toate link - urile care sunt asociate cu tab - uri, și să dea link - ul tab - ul curent un "w3-red" de clasă, pentru a evidenția:
Exemplu
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";
}
Încearcă - l singur » Tab-uri verticale
Exemplu
<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>
Încearcă - l singur » Tab Content Animate
Utilizați oricare dintre clasele W3-animate- să se estompeze, mări sau diapozitiv în conținut filă:
Exemplu
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Încearcă - l singur » Galerie de imagini cu file
× 
× 
× 
× Exemplu
<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> Încearcă - l singur » Tab-uri într-o rețea
Folosind tab-uri într-un al treilea aspect coloană. Rețineți că vom adăuga un chenar jos la fila activă, în loc de o culoare de fundal: