JSFiddle - React, Tailwind, and code Playground

by Hakim Tarbet

HTML

<div>
    <ul id="listTabs">
        <li data-tab="1" class="seleccionada">Opcion 1</li>
        <li data-tab="2">Opcion 2</li>
        <li data-tab="3">Opcion 3</li>
    </ul>
    <div id="tabContent">
        <div id="opcion1" class="tabBox">Contenido de la opcion 1 - un poco mas de texto para que se note el cambio</div>
        <div id="opcion2" class="tabBox">Contenido de la opcion 2 - mas texto haciendo que el cambio se note al seleccio</div>
        <div id="opcion3" class="tabBox">Contenido de la opcion 3 - Otro texto para mostrarl en la opcion 3</div>
    </div>

CSS

#listTabs li {
    display:inline;
    margin-right:15px;
    cursor:pointer;
}
#listTabs li:hover {
    text-decoration:underline;
}
.seleccionada {
    font-weight:bold
}
.tabBox {
    border:1px solid #cacaca;
    margin:20px 0;
    padding:20px;
    font-weight:bold;
    font-size:18px;
    width:250px;
}
#opcion2, #opcion3 {
    display:none;
}

JavaScript

$(document).ready(function (e) {

    // capturamos el evento clic sobre la lista #listTabs
    $('#listTabs li').click(function () {

        // leemos el atributo data-tab para saber de que elemento se trata
        var tab_this = $(this).attr('data-tab');

        // ocultamos todas las cajas del contenido antes de mostrar la correcta
        $('.tabBox').hide();

        // mostramos la caja adecuada dependiendo del atributo data-tab
        // lo que hemos guardado en la variable de arriba (tab_this)
        $('#opcion' + tab_this).show();

        // cambiamos de clase para resaltar la opcion seleccionada en la 1º lista
        $('#listTabs li').removeClass('seleccionada');

        // agregamos la clase al elemento sobre el que hemos hecho click.
        $(this).addClass('seleccionada');

    });
});