Londres
Londres est la capitale de l'Angleterre.
Il est la ville la plus peuplée du Royaume-Uni, avec une région métropolitaine de plus de 13 millions d'habitants.
Paris
Paris est la capitale de la France.
La région parisienne est l'un des plus grands centres de population en Europe, avec plus de 12 millions d'habitants.
Tokyo
Tokyo est la capitale du Japon.
Il est le centre de la région du Grand Tokyo, et la région métropolitaine la plus peuplée du monde.
Tabs (tabulations)
Les onglets sont parfaits pour les applications page Web unique, ou pour les pages Web capable d'afficher différents sujets.
Il suffit de créer de nombreux éléments avec le même nom de classe:
Exemple
<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>
Ensuite, ajoutez quelques boutons cliquables pour ouvrir le contenu (boutons simples, barre de navigation, sidenav, etc ..):
Exemple
<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>Et ajouter un JavaScript pour sélectionner les éléments:
Exemple
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";
}
Try It Yourself » expliqué JavaScript
Tout d' abord, appelez opencity () pour ouvrir "London" (id = "Londres).
Ensuite , appelez Ville open () avec un nom de ville différente (id = "Paris) lorsque l'utilisateur clique sur l' un des boutons du menu.
La fonction opencity () cache tous les éléments (affichage = "none") avec le nom de classe "ville", et affiche l'élément (display = "block") avec l'identifiant de la ville donnée.
/ Onglet courant actif
Si vous souhaitez mettre en surbrillance l'onglet / page courante l'utilisateur est sur, utilisez JavaScript et ajouter une classe de couleur spécifique à la liaison de l'onglet en cours. Dans l'exemple ci-dessous, nous avons ajouté une classe "tablink" à chaque lien. De cette façon, il est facile d'obtenir tous les liens qui sont associées avec des onglets, et de donner le lien de l'onglet actuel une classe "w3-rouge", pour mettre en évidence:
Exemple
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";
}
Try It Yourself » Vertical Tabs
Exemple
<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>
Try It Yourself » Content Tab animée
Utilisez l' une des classes w3-animate- à disparaître, le zoom ou glisser dans le contenu de l' onglet:
Exemple
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Try It Yourself » Onglets Galerie d'images
× 
× 
× 
× Exemple
<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> Try It Yourself » Onglets dans une grille
Utilisation des onglets dans une troisième mise en page de colonne. Notez que nous ajoutons une bordure inférieure à l'onglet actif, au lieu d'une couleur de fond: