-->

Tabla vertical para tus entradas

9/25/2019
Hoy a mostrar como insertar pestañas verticales en nuestras entradas
Para ello insertamos este código html en la edición de HTML




<html>








<head>








<meta name="viewport" content="width=device-width, initial-scale=1">








<style>








* {box-sizing: border-box}








body {font-family: "Lato", sans-serif;}








/* Style the tab */








.tab {








  float: left;








  border: 1px solid #ccc;








  background-color: #f1f1f1;








  width: 30%;








  height: 300px;








}








/* Style the buttons inside the tab */








.tab button {








  display: block;








  background-color: inherit;








  color: black;








  padding: 22px 16px;








  width: 100%;








  border: none;








  outline: none;








  text-align: left;








  cursor: pointer;








  transition: 0.3s;








  font-size: 17px;








}








/* Change background color of buttons on hover */








.tab button:hover {








  background-color: #ddd;








}








/* Create an active/current "tab button" class */








.tab button.active {








  background-color: #ccc;








}








/* Style the tab content */








.tabcontent {








  float: left;








  padding: 0px 12px;








  border: 1px solid #ccc;








  width: 70%;








  border-left: none;








  height: 300px;








}








</style>








</head>








<body>








<h2>Vertical Tabs</h2>








<p>Click on the buttons inside the tabbed menu:</p>








<div class="tab">








  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>








  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>








  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>








</div>








<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>








<script>








function openCity(evt, cityName) {








  var i, tabcontent, tablinks;








  tabcontent = document.getElementsByClassName("tabcontent");








  for (i = 0; i < tabcontent.length; i++) {








    tabcontent[i].style.display = "none";








  }








  tablinks = document.getElementsByClassName("tablinks");








  for (i = 0; i < tablinks.length; i++) {








    tablinks[i].className = tablinks[i].className.replace(" active", "");








  }








  document.getElementById(cityName).style.display = "block";








  evt.currentTarget.className += " active";








}








// Get the element with id="defaultOpen" and click on it








document.getElementById("defaultOpen").click();








</script>








   








</body>








</html> 







Imprimir entrada

Vertical Tabs

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.

Vertical Tabs

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.

Publicar un comentario

0 Comentarios

En breve revisaremos tu comentario para poder publicarlo.
Muchas gracias