Londres
Londres es la capital de Inglaterra.
Es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 13 millones de habitantes.
París
París es la capital de Francia.
La zona de París es uno de los centros de población más grandes de Europa, con más de 12 millones de habitantes.
Tokio
Tokio es la capital de Japón.
Es el centro de la mayor área de Tokio, y el área metropolitana más poblada del mundo.
Tabs (Tabuladores)
Las pestañas son perfectos para las aplicaciones de las páginas web individuales, o para páginas web capaces de mostrar las diferentes materias.
Basta con crear muchos elementos con el mismo nombre de la clase:
Ejemplo
<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>
A continuación, añadir algunos botones se puede hacer clic para abrir el contenido (botones individuales, barra de navegación, sidenav, etc ..):
Ejemplo
<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>Y añadir un JavaScript para seleccionar los elementos:
Ejemplo
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";
}
Inténtalo tú mismo " Explicación JavaScript
En primer lugar, llama OpenCity () para abrir "London" (id = "Londres).
A continuación, llame Ciudad abierta () con un nombre de ciudad diferente (id = "París) cuando el usuario hace clic en uno de los botones en el menú.
La función OpenCity () oculta todos los elementos de visualización (= "none") con el nombre de clase "ciudad", y muestra el elemento (display = "bloque") con el id ciudad determinada.
Active Tab / Corriente
Si desea seleccionar la pestaña / página actual del usuario está activada, el uso de JavaScript y añadir una clase color específico para el enlace pestaña actual. En el siguiente ejemplo, hemos añadido una clase "tablink" a cada enlace. De esta manera, es fácil de obtener todos los enlaces que se asocia con pestañas, y dar a la pestaña actual enlace de una clase "W3-rojo", para poner de relieve que:
Ejemplo
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";
}
Inténtalo tú mismo " aquí verticales
Ejemplo
<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>
Inténtalo tú mismo " Tab animada contenido
Utilice cualquiera de las clases w3-animate- a desvanecerse, el zoom o deslizarse en el contenido de la ficha:
Ejemplo
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Inténtalo tú mismo " Galería de imágenes de pestañas
× 
× 
× 
× Ejemplo
<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> Inténtalo tú mismo " Pestañas en una cuadrícula
El uso de pestañas en un tercer diseño de columna. Tenga en cuenta que añadimos un borde inferior de la pestaña activa, en lugar de un color de fondo: