W3.Schede di navigazione CSS
Londra
Londra è la capitale dell'inghilterra.
È la città più popolosa del Regno Unito, con un'area metropolitana di oltre 9 milioni di abitanti.
Navigazione a schede
La navigazione a schede è un modo per navigare in un sito web.
Normalmente, la navigazione a schede utilizza i pulsanti di navigazione (schede) disposti insieme alla scheda selezionata evidenziata.
Questo esempio utilizza elementi con lo stesso nome di classe ("city" nel nostro esempio) e cambia lo stile tra display:none e display:block per nascondere e visualizzare contenuti diversi:
Esempio
<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>
E alcuni pulsanti cliccabili per aprire il contenuto a schede:
Esempio
<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>
E un JavaScript per fare il lavoro:
Esempio
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";
}
Spiegazione JavaScript
La funzione openCity() viene chiamata quando l'utente fa clic su uno dei pulsanti nel menu.
La funzione nasconde tutti gli elementi con il nome di classe "city" ( display="none" ), e mostra l'elemento con il nome di città specificato ( display="block" );
Schede chiudibili
Londra
Londra è la capitale dell'Inghilterra.
Per chiudere una scheda, aggiungi onclick="this.parentElement.style.display='none'" a un elemento all'interno del contenitore delle schede:
Esempio
<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>
Scheda Attivo/Corrente
Per evidenziare la scheda/pagina corrente in cui si trova l'utente, utilizzare JavaScript e aggiungere una classe di colore al collegamento attivo. Nell'esempio seguente, abbiamo aggiunto una classe "tablink" a ciascun collegamento. In questo modo, è facile ottenere tutti i collegamenti associati alle schede e assegnare al collegamento della scheda corrente una classe "w3-red", 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";
}
Schede verticali
Esempio
<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>
Contenuto della scheda animato
Usa una qualsiasi delle classi w3-animate per sfumare, ingrandire o far scorrere il contenuto della scheda:
Esempio
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Galleria di immagini a schede
Clicca su un'immagine:
Esempio
<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>
Schede in una griglia
Utilizzo delle schede in un layout della terza colonna. Nota che aggiungiamo un bordo inferiore alla scheda attiva, invece di un colore di sfondo: