Pestañas de navegación W3.CSS
Londres
Londres es la capital de Inglaterra.
Es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.
Navegación con pestañas
La navegación con pestañas es una forma de navegar por un sitio web.
Normalmente, la navegación por pestañas utiliza botones de navegación (pestañas) dispuestos junto con la pestaña seleccionada resaltada.
Este ejemplo utiliza elementos con el mismo nombre de clase ("ciudad" en nuestro ejemplo) y cambia el estilo entre display:none y display:block para ocultar y mostrar contenido diferente:
Ejemplo
<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>
Y algunos botones en los que se puede hacer clic para abrir el contenido con pestañas:
Ejemplo
<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>
Y un JavaScript para hacer el trabajo:
Ejemplo
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 explicado
La función openCity() se llama cuando el usuario hace clic en uno de los botones del menú.
La función oculta todos los elementos con el nombre de clase "ciudad" ( display="none" ), y muestra el elemento con el nombre de ciudad dado ( display="block" );
Pestañas que se pueden cerrar
Londres
Londres es la ciudad capital de Inglaterra.
Para cerrar una pestaña, agregue onclick="this.parentElement.style.display='none'" a un elemento dentro del contenedor de pestañas:
Ejemplo
<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>
Pestaña activa/actual
Para resaltar la pestaña/página actual en la que se encuentra el usuario, use JavaScript y agregue una clase de color al enlace activo. En el siguiente ejemplo, hemos agregado una clase "tablink" a cada enlace. De esa manera, es fácil obtener todos los enlaces asociados con las pestañas y asignar al enlace de la pestaña actual una clase "w3-red" para resaltarlo:
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";
}
Pestañas verticales
Ejemplo
<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>
Contenido de la pestaña animada
Use cualquiera de las clases de w3-animate para desvanecer, hacer zoom o deslizar el contenido de la pestaña:
Ejemplo
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Galería de imágenes con pestañas
Haga clic en una imagen:
Ejemplo
<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>
Pestañas en una cuadrícula
Uso de pestañas en un diseño de tercera columna. Tenga en cuenta que agregamos un borde inferior a la pestaña activa, en lugar de un color de fondo: