Pestanas con HTML e CSS

Pestaña 3

Titulo 3

Lorem ipsum ...

Pestaña 2

Titulo 2

Lorem ipsum ...

Pestaña 1

Titulo 1

Lorem ipsum ...

Esta pagina con 3 pestanas, (se puede adicionar mas) esta compuesto por una parte de HTML,onde destaco el seguinte:

• un Div con la class container
• tres DIV con la class tab pero el id distinto entre si (mire el codigo)
• Tenemos las pestanas que el href nos conduce a la pestana
• Un titulo
• El articulo (cuerpo de la pestana)

...

La parte del CSS hay que realzar la position:absolute para colocar las pestanas

Se usa un tamano definido tanto en la anchura como en la altura

Si han puesto hasta nueve selectores, para que se pueda poner nueve pestanas sin problema alguno

La variable –tabs-position se usa para calcular la posición left de la pestaña.

e por ultimo le damos aspecto de pestaña activa a la que tiene el :target y a la última pestaña. Y finalmente, si la última pestaña se encuentra después de otra que tenga el :target le quitamos el aspecto de pestaña activa

---

Codigo Completo

//Los estilos
<style>
    /* parámetros para configurar las pestañas */
    :root {
        --tabs-border-color: #ABCDEF;
        --tabs-border-size: 3px;
        --tabs-text-color: white;
        --tabs-dark-color: #012345;
        --tabs-lite-color: #345678;
        --tabs-width: 120px;
        --tabs-height: 40px;
    }

    /* aspecto básico */
    body {
        font-family: sans-serif;
        line-height: 1.2;
    }

    h2,
    p {
        margin: 0;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    .tabs * {
        box-sizing: border-box;
    }

    /* funcionamiento básico del sistema de pestañas */
    .tab-content {
        display: none;
    }

    .tab:target .tab-content,
    .tab:last-of-type .tab-content {
        display: block;
    }

    .tab:target~.tab:last-of-type .tab-content {
        display: none;
    }

    /* esto es para posicionar las pestañas correctamente */
    .tab-container {
        position: relative;
        padding-top: var(--tabs-height);
        /* en esta zona colocaremos las pestañas */
    }

    #tab1>a {
        --tabs-position: 0;
    }

    #tab2>a {
        --tabs-position: 1;
    }

    #tab3>a {
        --tabs-position: 2;
    }

    #tab4>a {
        --tabs-position: 3;
    }

    #tab5>a {
        --tabs-position: 4;
    }

    #tab6>a {
        --tabs-position: 5;
    }

    #tab7>a {
        --tabs-position: 6;
    }

    #tab8>a {
        --tabs-position: 7;
    }

    #tab9>a {
        --tabs-position: 8;
    }

    .tab>a {
        text-align: center;
        position: absolute;
        width: calc(var(--tabs-width));
        height: calc(var(--tabs-height) + var(--tabs-border-size));
        top: 0;
        left: calc(var(--tabs-width) * var(--tabs-position));
        /* posición de cada pestaña */
    }

    /* más aspecto */
    .tabs {
        padding: 10px;
        color: var(--tabs-text-color);
    }

    .tab-content {
        background-color: var(--tabs-lite-color);
        padding: 20px;
        border: var(--tabs-border-size) solid var(--tabs-border-color);
        border-radius: 0 0 10px 10px;
        position: relative;
        z-index: 100;
    }

    .tab>a {
        background-color: var(--tabs-dark-color);
        padding: 10px;
        border: var(--tabs-border-size) solid var(--tabs-border-color);
        border-radius: 10px 10px 0 0;
        border-bottom: 0;
    }

    .tab:target>a,
    .tab:last-of-type>a {
        background-color: var(--tabs-lite-color);
        z-index: 200;
    }

    .tab:target~.tab:last-of-type>a {
        background-color: var(--tabs-dark-color);
        z-index: 0;
    }
</style>

//El codigo 
<div class="tabs">
    <div class="tab-container">
        <div id="tab3" class="tab">
            <a href="#tab3">Pestaña 3</a>
            <div class="tab-content">
                <h2>Titulo 3</h2>
                <p>Lorem ipsum ...</p>
            </div>
        </div>
        <div id="tab2" class="tab">
            <a href="#tab2">Pestaña 2</a>
            <div class="tab-content">
                <h2>Titulo 2</h2>
                <p>Lorem ipsum ...</p>
            </div>
        </div>
        <div id="tab1" class="tab">
            <a href="#tab1">Pestaña 1</a>
            <div class="tab-content">
                <h2>Titulo 1</h2>
                <p>Lorem ipsum ...</p>
            </div>
        </div>
    </div>
</div><br>



    

Ir al indice