Gli ultimi tutorial di sviluppo web
 

W3.CSS Tabs


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

Natura
Fiordi
Montagne
Luci

Natura ×
Natura
Fiordi ×
Fiordi
Montagne ×
Montagne
Luci ×
Aurora boreale

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">&times;</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: