Aprendiendo a crear tabs con jQuery. En este ejemplo se creamos tabs con jQuery de forma sencilla.
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>
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 );
};
});
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;
}
