Cómo crear: Título de la pestaña
- Página anterior Tarjeta vertical
- Página siguiente Tarjetas de página completa
Aprende a usar CSS y JavaScript para crear un título de pestaña.
Título de la pestaña
Haga clic en el botón "ciudad" para mostrar el título correspondiente:
London
London es la capital de Inglaterra.
Paris
Paris es la capital de Francia.
Tokyo
Tokyo es la capital de Japón.
Oslo
Oslo es la capital de Noruega.
Crear un título de pestaña deslizable
Paso 1 - Añadir HTML:
<div id="London" class="tabcontent"> <h1>London</h1> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h1>París</h1> <p>París es la capital de Francia.</p> </div> <div id="Tokyo" class="tabcontent"> <h1>Tokyo</h1> <p>Tokyo es la capital de Japón.</p> </div> <div id="Oslo" class="tabcontent"> <h1>Oslo</h1> <p>Oslo es la capital de Noruega.</p> </div> <button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button> <button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button> <button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button> <button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button> Cree botones para abrir contenido específico de pestaña. Todos los elementos <div> con la clase "tabcontent" están ocultos por defecto (con CSS y JS). Cuando el usuario haga clic en un botón, se abrirá el contenido de la pestaña que "coincide" con este botón.
Segundo paso - Añadir CSS:
Establecer el estilo de los botones y el contenido de las pestañas:
/* Establecer el estilo de los botones de la pestaña */ .tablink { background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; width: 25%; } /* Cambiar el color de fondo del botón al pasar el ratón por encima */ .tablink:hover { background-color: #777; } /* Establecer estilos por defecto para el contenido de las pestañas */ .tabcontent { color: white; display: none; padding: 50px; text-align: center; } /* Establecer estilos específicos para el contenido de cada pestaña */ #London {background-color:red;} #Paris {background-color:green;} #Tokyo {background-color:blue;} #Oslo {background-color:orange;}
Tercero - Añadir JavaScript:
function openCity(cityName, elmnt, color) { // Ocultar por defecto todos los elementos con class="tabcontent" var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Eliminar el color de fondo de todos los enlaces/botones de las pestañas tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } // Mostrar el contenido específico de la pestaña document.getElementById(cityName).style.display = "block"; // Añadir un color específico al botón para abrir el contenido de la pestaña elmnt.style.backgroundColor = color; } // Obtener el elemento con id="defaultOpen" y hacer clic en él document.getElementById("defaultOpen").click();
Páginas relacionadas
Tutoriales:¿Cómo crear pestañas?
- Página anterior Tarjeta vertical
- Página siguiente Tarjetas de página completa