Cómo crear: Páginas de etiquetas completas

Aprende a usar CSS y JavaScript para crear etiquetas de página completas que cubren toda la ventana del navegador (etiquetas de pantalla completa).

Crear una etiqueta de página única

Paso 1 - Añadir HTML:

<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contacto</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">Acerca de</button>
<div id="Home" class="tabcontent">
  <h3>Inicio</h3>
  <p>El hogar es donde late el corazón..</p>
</div>
<div id="News" class="tabcontent">
  <h3>Noticias</h3>
  <p>Alguna noticia este día agradable!</p>
</div>
<div id="Contact" class="tabcontent">
  <h3>Contacto</h3>
  <p>Contáctenos o pásese por aquí para una taza de café.</p>
</div>
<div id="About" class="tabcontent">
  <h3>Acerca de</h3>
  <p>Quienes somos y lo que hacemos.</p>
</div>

Crear botones para abrir el contenido de la pestaña específica. Todos los que tienen class="tabcontent" de <div> Los elementos están ocultos por defecto (a través de CSS y JS). Cuando el usuario hace clic en un botón, se abre el contenido de la pestaña que coincide con este botón.

Segundo paso - Añadir CSS:

Establecer el estilo de los enlaces y el contenido de la pestaña (página completa):

/* Establecer la altura de body y document al 100% para habilitar la "pestaña completa de página"
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}
/* Establecer el estilo de los enlaces 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%;
}
.tablink:hover {
  background-color: #777;
}
/* Establecer el estilo del contenido de la pestaña (y agregar altura: 100% a todo el contenido de la página) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}
#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}

Tercero - Añadir JavaScript:

function openPage(pageName, 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 pestaña
  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(pageName).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 se crea una pestaña?