Aprendiendo a crear tabs con jQuery. En este ejemplo se creamos tabs con jQuery de forma sencilla. Para profundizar en todas las funciones disponibles, consulta la documentación oficial de jQuery en su sitio web.
¿Cómo crear el archivo HTML?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Crear tabs con jQuery</title>
<link rel="stylesheet" href="css/styles.css" />
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div class="content">
<h1>Crear tabs con jQuery</h1>
<div class="botones">
<button class="btn_texto1 activo">LA EMPRESA</button>
<button class="btn_texto2">PRODUCTOS</button>
<button class="btn_texto3">MÁS INFORMACIÓN</button>
</div>
<div class="textos">
<div class="texto1">
<h2>LA EMPRESA</h2>
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500.</p>
</div>
<div class="texto2">
<h2>PRODUCTOS</h2>
<p>Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
</div>
<div class="texto3">
<h2>MÁS INFORMACIÓN</h2>
<p>Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker.</p>
</div>
</div>
</div>
</body>
</html>
¿Cómo crear el archivo jQuery?
// JavaScript Document
$(document).ready(function() {
$(".btn_texto1").addClass("activo");
$(".texto2").hide();
$(".texto3").hide();
$( ".btn_texto1" ).prop( "disabled", true );
for(var i = 1; i < 4; i++){
$(".btn_texto" + i).click((function(j) {
return function(event) {
$(this).addClass("activo");
activarTextos(j);
}
})(i));
}
var activarTextos = function(textoActivo){
for (var j=1; j<4; j++){
$(".texto" + j).hide();
$(".btn_texto" + j).removeClass("activo");
$( ".btn_texto" + j).prop( "disabled", false );
}
$(".texto" + textoActivo).fadeIn("slow");
$(".btn_texto" + textoActivo).addClass("activo");
$(".btn_texto" + textoActivo).prop( "disabled", true );
};
});
¿Cómo crear el archivo CSS?
@charset "utf-8";
/* CSS Document */
body{
background:#81d742;
}
.content{
width:1000px;
margin-top:50px;
min-height:600px;
background:#fff;
margin:0 auto;
padding:20px;
}
.botones{
padding: 10px 0 0 10px;
border-bottom: 1px solid #ccc;
}
.btn_texto1, .btn_texto2, .btn_texto3 {
background: #aaa;
border: 0;
color: #fff;
border-radius: 6px 6px 0 0;
padding: 10px;
}
.activo {
background: #333;
padding-top: 4px;
padding-bottom: 1px;
padding: 10px;
}
.texto1{
background: #fed3da;
padding:20px;
}
.texto2{
background: #D3DDFE;
padding:20px;
display:none;
}
.texto3{
background: #E2FED3;
padding:20px;
display:none;
}
Descargar Crear tabs con jQuery
Cómo crear tabs con jQuery
- Los tabs se crean con botones HTML que controlan la visibilidad de bloques de contenido
- jQuery oculta inicialmente todos los tabs excepto el primero con la función hide()
- Un bucle en jQuery vincula cada botón a un evento click para mostrar su contenido
- La función activarTextos gestiona mostrar un tab y ocultar los demás con fadeIn
- Los botones deshabilitados impiden interacción con la pestaña activa actualmente
