En este post voy a explicar como crear pestañas o tabs con HTML, CSS y JavaScript/JQuery que es un proceso realmente sencillo.
La estructura de la pagina, que tendrá las pestañas es realmente sencilla. Hacen falta 2 divisiones, una en la que estarán las pestañas y otra en la que estarán los contenidos de las pestañas.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/estilo.css"/>
<script type="text/javascript" src="js/cambiarPestanna.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<title></title>
</head>
<body>
<div class="contenedor">
<div class="titulo">¿Sobre que escribiré en el blog?</div>
<div id="pestanas">
<ul id=lista>
<li id="pestana1"><a href='javascript:cambiarPestanna(pestanas,pestana1);'>HTML</a></li>
<li id="pestana2"><a href='javascript:cambiarPestanna(pestanas,pestana2);'>CSS</a></li>
</ul>
</div>
<body onload="javascript:cambiarPestanna(pestanas,pestana1);">
<div id="contenidopestanas">
<div id="cpestana1">
Contenido de la pestaña 1
</div>
<div id="cpestana2">
Contenido de la pestaña 2
</div>
</div>
</body>
</html>
</pre>
En el anterior código, esta la estructura HTML completa. Además de las divisiones comentadas anteriormente, dentro de ellas para las pestañas se ha optado por crear una lista y para el contenido de cada pestaña una división. Con esto ya esta la estructura ahora solo falta darle estilo para que parezcan pestañas y crear una función para poder cambiar de pestaña.
El estilo obviamente es una cosa bastante personal y al cambiar alguna cosa puede que sea necesario cambiar otras para volver a reajustarlo todo bien. Me parece que las hojas de estilo son bastante sencillas de entender, lo único notar que en las esquinas superiores de las pestañas se las da un efecto redondeado pero a las inferiores obviamente no y que de la misma forma la esquina superior izquierda de la división que contiene las pestañas no sea redondeada porque habrá una pestaña justo encima.
body {
background: darkgrey;
}
.contenedor{
width: 1080px;
margin: auto;
background: black;
color: bisque;
padding: 20px 15px 50px 50px;
border-radius: 10px;
box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.8);
}
.contenedor .titulo{
font-size: 3.5ex;
font-weight: bold;
margin-left: 10px;
margin-bottom: 10px;
}
#pestanas {
float: top;
font-size: 3ex;
font-weight: bold;
}
#pestanas ul{
margin-left: -40px;
}
#pestanas li{
list-style-type: none;
float: left;
text-align: center;
margin: 0px 2px -2px -0px;
background: darkgrey;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 2px solid bisque;
border-bottom: dimgray;
padding: 0px 20px 0px 20px;
}
#pestanas a:link{
text-decoration: none;
color: bisque;
}
#contenidopestanas{
clear: both;
background: dimgray;
padding: 20px 0px 20px 20px;
border-radius: 5px;
border-top-left-radius: 0px;
border: 2px solid bisque;
width: 1025px;
}
Con esto ya tenemos las pestañas creadas, pero aun no hacen nada y el contenido de todas las pestañas se muestra uno debajo de otro.
La solución es una sencilla función que modifique la hoja de estilos a la que le pasaremos la división que contiene todas las pestañas (en nuestro caso pestanas) y la pestaña que se quiere mostrar (pestana1, pestana2,…).
Esta función actúa en 2 pasos, en el primero recorre todas pestañas, ocultando su contenido y restaurando el color de fondo de la pestaña y el padding inferior y en el segundo paso muestra el contenido de la pestaña que se quería mostrar y cambia el color de la pestaña y aumenta el padding de la pestaña para que tape el borde de lo que será el contenido de las pestañas, que queda justo debajo y así quede pestaña y contenido del mismo color y todo continuo.
// Dadas la division que contiene todas las pestañas y la de la pestaña que se
// quiere mostrar, la funcion oculta todas las pestañas a excepcion de esa.
function cambiarPestanna(pestannas,pestanna) {
// Obtiene los elementos con los identificadores pasados.
pestanna = document.getElementById(pestanna.id);
listaPestannas = document.getElementById(pestannas.id);
// Obtiene las divisiones que tienen el contenido de las pestañas.
cpestanna = document.getElementById('c'+pestanna.id);
listacPestannas = document.getElementById('contenido'+pestannas.id);
i=0;
// Recorre la lista ocultando todas las pestañas y restaurando el fondo
// y el padding de las pestañas.
while (typeof listacPestannas.getElementsByTagName('div')[i] != 'undefined'){
$(document).ready(function(){
$(listacPestannas.getElementsByTagName('div')[i]).css('display','none');
$(listaPestannas.getElementsByTagName('li')[i]).css('background','');
$(listaPestannas.getElementsByTagName('li')[i]).css('padding-bottom','');
});
i += 1;
}
$(document).ready(function(){
// Muestra el contenido de la pestaña pasada como parametro a la funcion,
// cambia el color de la pestaña y aumenta el padding para que tape el
// borde superior del contenido que esta juesto debajo y se vea de este
// modo que esta seleccionada.
$(cpestanna).css('display','');
$(pestanna).css('background','dimgray');
$(pestanna).css('padding-bottom','2px');
});
}
Y aquí puedes ver también el código completo, el resultado, realizar modificaciones y ver el resultado.
He cambiado de jsfiddle a codepen para mostrar el ejemplo porque carga infinitamente más rapido pero no se porque razón no se ejecuta el javascript automaticamente al cargarlo (es cosa de codepen y no del ejemplo) y por lo tanto no se selecciona automaticamente la primera pestaña pero si haces click en alguna pestaña ya funciona o si le das a edit on codepen hay si funciona como debe.
See the Pen Tabs HTML by Ivan Salas (@isc7) on CodePen
Y a petición de Alex Schenck pues os pongo como crear pestañas en vertical de una forma muy simple porque solo es necesario añadir 4 líneas al CSS.
See the Pen Vertical Tabs HTML by Ivan Salas (@isc7) on CodePen
Edito el post nuevamente para añadir una nueva modificación para que cada pestaña sea de un color diferente. Los cambios son extremadamente sencillos, basicamente es añadir el CSS necesario para darle un color distinto a cada pestaña y cambiar el padding del contenedor de las pestañas y meterlo directamente en las propias pestañas y quitar un par de lineas del javascript para que no se cambien los colores de fondo al elegir una pestaña porque en este caso no tiene sentido.
See the Pen Tabs HTML by Ivan Salas (@isc7) on CodePen.
Y para terminar, como siempre el código completo (de los 3 tipos de pestañas) lo puedes descargar aquí.
de verdad mil gracias era lo q buscaba creo q te amo kora XDDDDDDD
Sinceramente no que conozco de nada pero haz más tutoriales así jeje !!! lo voy a intentar meter dentro de un componente de joomla ya que no me deja introducir ningún modulo de este tipo y el contenido serán valores que leerá de la BBDD !!!
Gracias por compartor este material.
Excelente info !!!! antes que nada muchas gracias!! ademas te consulto, ¿cómo puedo hacer para que queden las pestañas de forma horizontal?
Muchas gracias !!!
Pero no estan ya de forma horizontal?
wena man me sirvio de mucha grax =)
Muchas Gracias por el tutorial 😉
Lo he implementado en la web de un cliente que me solicitó unos textos en formato de pestañas y funciona perfectamente.
Un saludo desde Barcelona !
PC-SERVEIS
http://www.pc-serveis.es
Me alegro de que te fuese de utilidad
MUchsisisisisisimas gracias, muy bueno, super útil.
Gracias!! Me salvaste! Pero tengo una duda, ¿Cómo le puedo cambiar el color de fondo a la pestaña seleccionada?
¿Cambiar el color de fondo a la pestaña seleccionada?
Solo tienes que modificar en el CSS el background de lo que quieras.
¿O te refieres a que cada pestaña tenga un color de fondo?
Por ejemplo, que la pestaña HTML sea azul (tanto el contenido como la pestaña), CSS sea roja, JavaScript verde, etc.
Tampoco es dificil solo tienes que añadir al CSS las propiedades para cada pestaña individualmente.
Por ejemplo para que la pestaña2 sea roja tienes que añadir:
#contenidopestanas div{
padding: 20px 0px 20px 20px;
}
#pestanas #pestana2, #cpestana2{
background:red;
}
(El padding hay que quitarlo de #contenidopestanas para que no tenga un borde gris)
y en el javaScript con quitar la siguiente linea ya te funcionará
$(pestanna).css(‘background’,’dimgray’);
Así de sencillo es y puede ser interesante asique lo añadire al post cuando pueda.
espectacular…gracias algun correo donde te pueda localizar? saludos desde Colombia
Puedes preguntar lo que quieras por aquí… pero si quieres un email aquí tienes uno.
contacto@programandoointentandolo.com
gracias por el codigo era lo que buscaba
¿Como cambiar el color de fondo a la pestaña seleccionada?
Modificar en el CSS todos los background y no me cambia el color…! Ayudaaaa!!! Gracias
Dime que es exactamente que es lo que quieres cambiar de color (el color de los nombres de las pestañas, el del contenido o las 2 cosas ) y te digo el css que tienes que modificar…
El fondo de la pestaña activa, quiero cambiar el color del fondo de la pestaña cuando se selecciona como esta en la imagen adjunta!!! Gracias por responder Ivan… Saludos
Justo ese es el fondo que se cambia con javaScript, tienes que poner el color que quieras en la penúltima linea.
$(pestanna).css(‘background’,’dimgray’);
Cambias dimgray por el color que quieras y listo.
Por ejemplo, para ponerlo azul:
$(pestanna).css(‘background’,’#147′);
Listo… t debo otra…! Gracias viejo, muy buena tu pagina y muy pendiente d ella estamos en contacto. Saludos!!!
en que parte pongo el codigo de java script???
Lo ideal es ponerlo en un archivo externo como esta en el código que te puedes descargar, pero tambien puedes ponerlo dentro del HTML entre etiquetas codigo js
Me gustaría saber si tienes la solución para poder tener de manera predeterminada alguna pestaña, no logro hacer eso… me muestra todo el contenido de todas las pestañas, por favor espero respuesta y muchas gracias, me ha servido mucho.
Eso pasa porque no se carga el código javaScript al cargar el HMTL, que es lo mismo que pasa con los ejemplos en codepen.
Para que aparezca una pestaña seleccionada (por ejemplo la 1) tienes que añadir:
De todos modos al final del post tienes un enlace para descargar los ejemplos para ver su código completo.
1000 gracias por el aporte, tengo una duda al insertar otro div en el contenido de las pestanas, este nuevo que lo utilizo para contar caracteres lo obvia, se me podrias dar una mano en esto te agradeceria. gracias
La verdad es que no entiendo muy bien tu pregunta, si me lo puedes poner de otro modo o ponerme el trozo de código que te falla seguro que encontramos la solucion.
Gracias por tu pronta respuesta, te lo explico en tu codigo gracias.
/*aqui en este div que incluyo tengo que mostrar un contador de caracteres jquery,pero al aplicarle las pestañas no me muestra, si lo quito el uso de pestañas me muestra todo bien*/
Contenido de la pestaña 2
Eso pasa porque para ocultar las pestañas lo que se hace es ocultar todos los divs:
$(listacPestannas.getElementsByTagName('div')[i]).css('display','none');Por lo que tienes la opción de ponerle una clase a las pestañas y solo ocultar los divs con esa clase o bien cuando muestras la pestaña quitando el display: none hacer lo mismo con el div del contador. Con esta segunda opción con 2 lineas es suficiente y muy facil de entender.
$(document).ready(function(){ $(cpestanna).css('display',''); // muestra el contador de la pestaña $contador = $(cpestanna).find('#longitud_textarea'); $contador.css('display',''); $(pestanna).css('background','dimgray'); $(pestanna).css('padding-bottom','2px'); });Muchas gracias, funciono a la perfección. Saludos
hola! tengo problemas para poner más de un contenedor con pestañas en una misma página. Cuando agrego un 2do contenedor, me anula todas! qué puede ser?
Oh genial, justo lo que buscaba y más. muy bueno =)
gracias!
Acabo de descubrite y me encantas!! Justo lo que estaba buscando! Eres un crack! Sigue asi, que nos ayudamos muchisimo! Un besazo.
subes el código pero falta un archivo JS «js/jquery-1.7.2.min.js».. el aporte esta bueno
creo que no te has fijado pero en cada una de las 3 carpetas correspondientes a cada ejemplo hay una carpeta js que tiene el archivo jquery-1.7.2.min.js de todos modos en https://code.jquery.com/ puedes encontrar la version actual de jquery porque la 1.7 es de hace bastante tiempo.
Excelente! Me funcionó a la perfeccion
oye amigo en la ultima version te aparecen todas al principio una despues de la otra como se puede hacer para quitar eso
Eso es porque no se esta cargando el codigo javascript al cargarse la
pagina, si te refieres al ejemplo es porque por algun motivo en codepen
no se ejecuta el javascript cuando se carga el ejemplo, sino revisa que
la ruta del .js sea correcta
Amigo ayuda por favor, en FIREFOX anda joya super bien, pero en chrome y IE 10 no funciona. Que podra ser ???
Genial
el aporte. Muchas gracias. la verdad que muy bueno!!!
Otra consulta. Me quedo desalineado, sabes porque?
consulta 2: Como puedo hacer para manejar el ancho? como veras
en la imagen, se choca con una columna que tengo al costado. Gracias por la
ayuda!!
ya pude solucionar el tema del ancho.
Pero aun no el tema del desalineado. Gracias!!
No me funciona la parte de javascript como puedo hacer?
Gracias por el código, nunca había usado pestañas en Html.
amigo si lo que deseo es que las pestañas cambien dando clic a un boton y no dando clic directamente en la pestala como deberia hacer?
Puedes llamar a la función para cambiar de pestaña desde un botón si así lo prefieres o incluso lanzar el evento click sobre una pestaña desde el botón.
¿sabes por que no me funciona ningún código que busco en la web para html? lo pego en una entrada de mi blog y nada 🙁 nunca me había pasado que un codigo de alguna función de html no me sirva.
me sale todo en texto plano, no se hacen las tabs. Y lo pego correctamente en html.
No se cual si tu blog esta basado en un cms, pero por lo que comentas supongo que si, por ejemplo en wordpress las funciones javascript (no recuerdo si pasa lo mismo con los estilos) no se pueden poner directamtente sobre una entrada por que no funciona. Tienes que crearlos en un archivo externo y enlazarlo.
Saludos
Excelente código y de mucha utilidad.
Se me plantea un problema, ya que soy un poco novato en esto.
Dentro de los div de las pestañas, tengo otros div que contienen datos de un formulario.
Al ocultar los div de las pestañas, se me ocultan todos los elementos del formulario. ¿Como puedo hacer para ocultar solo lo que contenga cada pestaña y no todo?
No se si me explico.
Muchas gracias !!!!
Hola Iván muchas gracias por ayudarnos dando a conocer estos codigos que muchos necesitamos. Mi pregunta es la siguiente:
En lugar de un texto ¿Se podría incluir un código tipo iframe o mejor aún el sustituto de «iframe» en HTML5?. Lo he intentado pero claro me sale el código en texto. En caso afirmativo ¿Vale el codigo proporcionado por ti?. Mi intención como ya te habras imaginado es utilizar las pestañas de una forma dinámica para un proyecto que estoy haciendo en PHP. Muchisimas gracias y para cuando puedas .
Saludos.
Si puedes añadir el contenido que quieras, lo unico que se hace en las pestañas es ocultar el continido de todas las pestañas menos de una de forma que parece que al cambiar de pestaña se cambia el contenido 🙂
He editado el primer ejemplo con una nueva pestaña con una web dentro de una pestaña usando
http://codepen.io/isc7/pen/tmrvA
Se podría poner una imagen en el Tab, en la pestaña?
Si claro, no hay ningún problema, puedes poner cualquier tipo de elemento
Pero me refiero a el título es decir así como la imagen, ahí donde está HTML, yo sé que dentro se puede hacer, pero me gustaría saber cómo ponerla ahí, Gracias https://uploads.disquscdn.com/images/ee52afa894c1157e193b377539ba86836fbf5e4fd58854694a2390ee0d988233.png
Para los titulos tienes que meterla dentro de los enlaces de la lista para que al hacer click en la imagen tambien se cambie de pestaña y entonces puede que necesites meter el texto del titulo en un span por ejemplo para aplicarle alguna clase al texto para separarlo, centrarlo,…
<li id=»pestana1″>
<a href=’javascript:cambiarPestanna(pestanas,pestana1);’>
<img src=»ruta/imagen.jpg»/>
<span>HTML</span>
</a>
</li>
Hola amigos, para que se mantenga la pestaña1 y su contenido activo. cual seria la función en JS y en HTML que se utilizaria.? porque al cargar por primera vez las pestañas puedo ver todo el contenido agrupado, y sin ninguna pestaña seleccionada. Lo que quiero lograr es que al cargar la página (completa) ya tenga seleccionada la primera pestaña por defecto.
Prueba a añadir la llamada a la función que cambia de pestaña justo cuando se cargue la página (en el documento.ready para que ya esté cargado el html)
$(document).ready(function(){
cambiarPestanna(pestanas,pestana1);
});
y si lo que quisiera es tener un boton aparte que me abriera una pestaña? Imagina que la ultima de tus pestañas es contactar, no esta abierta por defecto puesto que es la ultima, y le pones ancla (‘< a name=»#contactar»></ a>») y tienes un boton que pone contactar y como harias para que se abriera esa pestaña?
Puedes cambiar de pestaña sin problemas usando botones, enlaces o lo que te resulte mejor, he añadido al ejemplo de las pestañas de colores un botón que abre otra pestaña para que lo veas en vivo y ya de paso que quede para cualquiera sin pener que buscar en los comentarios
Lo que hay que hacer es llamar al javascript que tiene cada pestaña y que hace que se abra, desde el botón en cuestión.
En este ejemplo se abre la pestaña 2 desde un boton que esta dentro de la primera pero la ubicación del boton es indiferente.
<button onclick=»javascript:cambiarPestanna(pestanas,pestana2);» >Abrir tab CSS</button>
Como hago que el tamaño de el cuadro (contenedor) no se ajuste al tamaño del párrafo sino que llegue hasta abajo dela pagina?
Añade al estilo correspondiente el alto que se ajuste a lo que buscas. Por ejemplo para que tengan un alto de 800px quedaria asi:
#contenidopestanas div{
padding: 20px 0px 20px 20px;
height: 800px; /*El alto que quieras poner*/
}
Gracias, disculpe que lo moleste de nuevo pero como podría poner el cuadro un poco transparente (el mas externo, el negro) sin que el mas interno ni las letras se pongan transparentes?
Muchas gracias 😁 era para una tarea de la universidad Me sirvió Mucho, gracias.
https://uploads.disquscdn.com/images/2d64ea9a647a76ee45f98d3650e407e0049a5985b53a4f31e99044278ef62e88.png
Gracias me salvaste, tengo una duda no se si esto sigue activo pero, ¿como hago para darle un estilo diferente a cada pestaña ?
Holaaa se que es viejo el post pero necesito ayuda, cada vez que pongo algo dentro de las pestañas tipos divs o así no me aparecen, si al cambiar entre pestañas durante un milisegundo pero ahí queda
GRACIAS !!!