Onglets de navigation W3.CSS
Londres
Londres est la capitale de l'Angleterre.
C'est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 9 millions d'habitants.
Navigation par onglets
La navigation par onglets est un moyen de naviguer sur un site Web.
Normalement, la navigation par onglets utilise des boutons de navigation (onglets) disposés avec l'onglet sélectionné en surbrillance.
Cet exemple utilise des éléments avec le même nom de classe ("city" dans notre exemple) et change le style entre display:none et display:block pour masquer et afficher un contenu différent :
Exemple
<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>
Et quelques boutons cliquables pour ouvrir le contenu des onglets :
Exemple
<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>
Et un JavaScript pour faire le travail :
Exemple
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";
}
JavaScript expliqué
La fonction openCity() est appelée lorsque l'utilisateur clique sur l'un des boutons du menu.
La fonction masque tous les éléments avec le nom de classe "city" ( display="none" ) et affiche l'élément avec le nom de ville donné ( display="block" );
Onglets refermables
Londres
Londres est la capitale de l'Angleterre.
Pour fermer un onglet, ajoutez onclick="this.parentElement.style.display='none'" à un élément à l'intérieur du conteneur d'onglet :
Exemple
<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>
Onglet actif/actuel
Pour mettre en surbrillance l'onglet/la page actuelle sur laquelle se trouve l'utilisateur, utilisez JavaScript et ajoutez une classe de couleur au lien actif. 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 associés aux onglets et de donner au lien de l'onglet actuel une classe "w3-red", pour le 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";
}
Onglets verticaux
Exemple
<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>
Contenu de l'onglet animé
Utilisez l'une des classes w3-animate- pour fondre, zoomer ou faire glisser 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>
Galerie d'images à onglets
Cliquez sur une image :
Exemple
<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>
Onglets dans une grille
Utilisation d'onglets dans une disposition en troisième colonne. Notez que nous ajoutons une bordure inférieure à l'onglet actif, au lieu d'une couleur d'arrière-plan :