Londra
Londra è la capitale dell'Inghilterra.
E 'la città più popolosa del Regno Unito, con un'area metropolitana di oltre 13 milioni di abitanti.
Parigi
Parigi è la capitale della Francia.
La zona di Parigi è uno dei più grandi centri di popolazione in Europa, con più di 12 milioni di abitanti.
Tokyo
Tokyo è la capitale del Giappone.
E 'il centro della Greater Tokyo Area, e l'area metropolitana più popolosa del mondo.
Tabs (Tabulazioni)
Le schede sono perfetti per le applicazioni singola pagina web, o per le pagine web in grado di visualizzare diversi soggetti.
Basta creare molti elementi con lo stesso nome della classe:
Esempio
<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>
Quindi aggiungere alcuni pulsanti cliccabili per aprire il contenuto (pulsanti singoli, barra di navigazione, sidenav, ecc ..):
Esempio
<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>
E aggiungere un JavaScript per selezionare gli elementi:
Esempio
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";
}
Prova tu stesso " JavaScript spiegato
In primo luogo, chiamare OpenCity () per aprire "London" (id = "Londra).
Quindi chiamare Open City () con un nome città diversa (id = "Parigi) quando l'utente fa clic su uno dei pulsanti del menu.
La funzione OpenCity () nasconde tutti gli elementi del display (= "none") con il nome della classe "città", e visualizza l'elemento (display = "blocco") con il dato id città.
Attivo / scheda corrente
Se si desidera evidenziare l'attuale scheda / pagina che l'utente è attivo, utilizzare JavaScript e aggiungere una classe colore specifico per il collegamento scheda corrente. Nell'esempio riportato di seguito, abbiamo aggiunto una classe "tablink" per ogni link. In questo modo, è facile da ottenere tutti i link che è associato con le schede, e dare il link scheda corrente di una classe "w3-rossa", per evidenziarlo:
Esempio
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";
}
Prova tu stesso " schede verticali
Esempio
<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>
Prova tu stesso " Tab animato Content
Utilizzare una delle classi w3-animate- a svanire, zoom o la presentazione del contenuto di scheda:
Esempio
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Prova tu stesso " Galleria di immagini a schede
Esempio
<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>
Prova tu stesso " Le schede in una griglia
Utilizzando le schede in un terzo layout di colonna. Si noti che aggiungere un bordo inferiore per la scheda attiva, invece di un colore di sfondo: