Crear tabs (pestañas interactivas) con Html, Css y JavaScript

Aplicamos HTML:

<div class="tab">
    <div class="tab-head">
        <ul class="tabTitles">
            <li id="tabTitle-1" class=""><a>Perfil</a></li>
            <li id="tabTitle-2" class=""><a>Tablero</a></li>
            <li id="tabTitle-3" class=""><a>Ajustes</a></li>
            <li id="tabTitle-4" class=""><a>Contactos</a></li>
        </ul>
    </div>
    <div class="tab-body">
        <div id="tabContent-1" class="tabContent hidden" data-index="0"><p>Este es un contenido de marcador de posición del contenido <b>asociado de la pestaña Perfil</b>. Al hacer clic en otra pestaña, se alternará la visibilidad de esta para la siguiente. La pestaña JavaScript intercambia clases para controlar la visibilidad y el estilo del contenido.</p></div>
        <div id="tabContent-2" class="tabContent hidden" data-index="1"><p>Este es un contenido de marcador de posición, el contenido <b>asociado de la pestaña Panel de control</b>. Al hacer clic en otra pestaña, se alternará la visibilidad de esta para la siguiente. La pestaña JavaScript intercambia clases para controlar la visibilidad y el estilo del contenido.</p></div>
        <div id="tabContent-3" class="tabContent hidden" data-index="2"><p>Este es un contenido de marcador de posición del contenido <b>asociado de la pestaña Configuración</b>. Al hacer clic en otra pestaña, se alternará la visibilidad de esta para la siguiente. La pestaña JavaScript intercambia clases para controlar la visibilidad y el estilo del contenido.</p></div>
        <div id="tabContent-4" class="tabContent hidden" data-index="3"><p>Este es un contenido de marcador de posición del contenido <b>asociado de la pestaña Contactos</b>. Al hacer clic en otra pestaña, se alternará la visibilidad de esta para la siguiente. La pestaña JavaScript intercambia clases para controlar la visibilidad y el estilo del contenido.</p></div>
    </div>
</div>

Aplicamos CSS:

.hidden {
    display: none;
}
.show {
    display: block;
}
.tab-head {
    border-bottom: 1px solid #ccc;
}
.tabTitles {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.tabTitles li {
    list-style: none;
    display: flex;
    border-bottom: 1px solid #ccc;
    margin-bottom: -1px;
}
.tabTitles li:hover {
    border-bottom: 2px solid #9e9e9e;
    margin-bottom: -1px;
}
.tabTitles li.show {
    border-bottom: 2px solid #2196f3;
    margin-bottom: -1px;
}
.tabTitles li a {
    color: #7c7c7c;
    text-decoration: none;
    padding: .7rem 1rem;
    cursor: pointer;
}
.tabTitles li.show:hover a {
    color: #2196f3;
}
.tabTitles li.show a {
    color: #2196f3;
}
.tab-body {
    padding: 1rem;
}

Aplicamos JAVASCRIPT:

document.getElementById("tabTitle-1").classList.add("show");
document.getElementById("tabContent-1").classList.add("show");

const tabTitles = document.querySelectorAll(".tabTitles a");
const tabContents = document.querySelectorAll(".tabContent");
for(let el of tabTitles) {
    el.addEventListener( "click", e => {
        e.preventDefault();

        document.querySelector(".tabTitles li.show").classList.remove("show");
        document.querySelector(".tabContent.show").classList.remove("show");

        const parentListItem = el.parentElement;
        parentListItem.classList.add("show");
        const index = [...parentListItem.parentElement.children].indexOf(parentListItem);
    
        const panel = [...tabContents].filter(el => el.getAttribute("data-index") == index);
        panel[0].classList.add("show");
    })
};

See the Pen Crear tabs (pestañas interactivas) con Html, Css y JavaScript by Gustavo (@gusta1996) on CodePen.

Deja una respuesta

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

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
100% Free SEO Tools - Tool Kits PRO
close