Hoy vamos a explicar como podemos hacer un menú con pestañas y cabecera.
Crear encabezados de pestaña conmutables
Con este menú crearemos contenido con las pestanas específicas.
Cuando hacemos clic en un botón se abrirá el contenido de esa pestaña que coincide con ese botón.
Ingredientes
<style>body {font-family: "Lato", sans-serif;}.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;}/* Style the tab content */.tabcontent { color: white; display: none; padding: 50px; text-align: center;}#London {background-color:red;}#Paris {background-color:green;}#Tokyo {background-color:blue;}#Oslo {background-color:orange;}</style></head><body><p>Click on the buttons inside the tabbed menu:</p><div id="London" class="tabcontent"> <h1>London</h1> <p>London is the capital city of England.</p></div><div id="Paris" class="tabcontent"> <h1>Paris</h1> <p>Paris is the capital of France.</p> </div><div id="Tokyo" class="tabcontent"> <h1>Tokyo</h1> <p>Tokyo is the capital of Japan.</p></div><div id="Oslo" class="tabcontent"> <h1>Oslo</h1> <p>Oslo is the capital of Norway.</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><script>function openCity(cityName,elmnt,color) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } document.getElementById(cityName).style.display = "block"; elmnt.style.backgroundColor = color;}// Get the element with id="defaultOpen" and click on itdocument.getElementById("defaultOpen").click();</script></body>
<style>
body {font-family: "Lato", sans-serif;}
.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;
}
/* Style the tab content */
.tabcontent {
color: white;
display: none;
padding: 50px;
text-align: center;
}
#London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}
</style>
</head>
<body>
<p>Click on the buttons inside the tabbed menu:</p>
<div id="London" class="tabcontent">
<h1>London</h1>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h1>Paris</h1>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h1>Tokyo</h1>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="Oslo" class="tabcontent">
<h1>Oslo</h1>
<p>Oslo is the capital of Norway.</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>
<script>
function openCity(cityName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(cityName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
Este código podemos usarlo tanto en el editor de nuestas entradas HTML o bien en un gadget.
Tendremos que cambiar los siguientes códigos :
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
</div>
Modificamos lo subrayado por el nombre de cuestas pestañas .
Ahora en la tabla de el contenido al igual que anteriormente modificamos lo subrayado por el texto de cada pestaña.
<!-- Tab content -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.
Puedes ver en este post como lo hacemos paso a paso
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.
Puedes ver en este post como lo hacemos paso a paso
Click on the buttons inside the tabbed menu:
London
London is the capital city of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Oslo
Oslo is the capital of Norway.
No hay comentarios:
Publicar un comentario
Deja tu comentario y en breve te contestaremos