Crear tabs con jQuery

Crear tabs con jQuery

Aprendiendo a crear tabs con jQuery. En este ejemplo se creamos tabs con jQuery de forma sencilla.

crear tabs con jquery

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

Descargar Crear tabs con jQuery


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *