Cómo crear: Título de la pestaña

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.

Prueba por tu cuenta

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();

Prueba por tu cuenta

Páginas relacionadas

Tutoriales:¿Cómo crear pestañas?