JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Tabs Customizados

by Yolanda Robles

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div>
    <input type="text" id="nombreTab" class="textBox" />
<span class="button" onclick="añadirTab();">
    <i class="fa fa-plus"></i>
    Nuevo Tab
</span>

</div>
<div style="margin-bottom:30px;">
    <input type="text" id="contenidoTab" class="textBox" style="width:500px;" />
</div>
<div class="tabbable">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active tabCntrl" id="tab1"> <a href="#informe1" data-toggle="tab">
                Informe 1
                <i id="1" class="fa fa-times ibutton-close" 
                onclick="closeTab(this);"></i>
            </a>

        </li>
        <li id="tab2" class="tabCntrl"> <a href="#informe2" data-toggle="tab">
                Informe 2
                <i id="2" class="fa fa-times ibutton-close" onclick="closeTab(this);"></i>
            </a>

        </li>
        <li id="tab3" class="tabCntrl"> <a href="#informe3" data-toggle="tab">
                Informe 3
                <i id="3" class="fa fa-times ibutton-close" onclick="closeTab(this);"></i>
            </a>

        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="informe1">
            <p>my website</p>
        </div>
        <div class="tab-pane" id="informe2">
            <p>my facebook profile</p>
        </div>
        <div class="tab-pane" id="informe3">
            <p>my tweets</p>
        </div>
    </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

body {
    margin: 10px;
}
.tab-pane {
    padding:5px;
}
.ibutton-close {
    margin-left:10px;
    cursor:pointer;
}
.tab-content {
    min-height:150px;
    height:100%;
    border-left:solid 1px #a1d470;
    border-bottom:solid 1px #a1d470;
    border-right:solid 1px #a1d470;
}
/* Estilo del tab activo*/
 .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    border-bottom-color:transparent !important;
    height:40px;
    color:#777;
    margin-top:0px;
    line-height:10px!important;
    font-size:16pt;
}
/* Estilos de los tabs inactivos*/
 .nav-tabs > li > a, .nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
    color:#fff;
    border-color:#a1d470 !important;
    background-color:#a1d470;
    height:30px;
    margin-top:10px;
    line-height:15px !important;
}
.button {
    border: 2px solid #a1d470 !important;
    width:105px;
    height:40px;
    padding:7px;
    line-height:20px;
    border-radius: 10px;
    margin:10px 0px 30px 0px;
    cursor:pointer;
}
.textBox {
    margin:15px 0px 0px 15px;
    width:200px;
    height:30px;
}

JavaScript

// Función para añadir un nuevo tab
function añadirTab() {
    
    var textoTab = $('#nombreTab').val();
    var contenidoTab = $('#contenidoTab').val();

    if (textoTab == '') {
        alert('El nombre del Tab debe estar informado');
    } else {
        // Tenemos nombre para el tab
        AñadirNuevoTab(textoTab, contenidoTab);
    }
}

/******************************************************
 * FUNCIÓN QUE AÑADE UN NUEVO TAB A LA LISTA DE TABS*
 ******************************************************/
function AñadirNuevoTab(textoTab, contenido) {
    var nuevoIdTab = ObtenerNuevoIdTab();

    // Generamos el código del nuevo Tab
    var nuevoTab = "<li class='tabCntrl' id='tab" + nuevoIdTab + "'>";
    nuevoTab = nuevoTab + "<a href='#informe" + nuevoIdTab;
    nuevoTab = nuevoTab + "' data-toggle='tab'>" + textoTab;
    nuevoTab = nuevoTab + "<i id='" + nuevoIdTab + "' class='fa fa-times ";
    nuevoTab = nuevoTab + "ibutton-close' onclick='closeTab(this);'>"
    nuevoTab = nuevoTab + "</i></a></li>";

    // Lo concatenamos en la lista de tabs
    $('#myTab').append(nuevoTab);

    // Generamos el código del contenido del nuevo tab
    var nuevoContenidoTab = "<div class='tab-pane' id='informe" + nuevoIdTab + "'>";
    nuevoContenidoTab = nuevoContenidoTab + "<p>" + contenido + "</p></div>";

    // Concatenamos el contenido en el div de contenidos
    $('.tab-content').append(nuevoContenidoTab);

    // Le quitamos la clase activa al que esté activo en este momento:
    $(".tabCntrl").each(function (index) {
        $(this).removeClass('active');
    });

    $('.tab-pane').each(function (index) {
        $(this).removeClass('active');
    });

    // Activamos el nuevo tab
    $('#tab' + nuevoIdTab).addClass('active');
    $('#informe' + nuevoIdTab).addClass('active');
}

/******************************************************
 * FUNCIÓN QUE OBTIENE UN NUEVO ID DE TAB             *
 ******************************************************/
function...