problem with form with tabs

1

I took a code on the internet that configures tabs, everything works fine, except that when I change the tab and return to previous, the data entered in the form has been erased and the masks of the fields are also lost. This is the config code:

$(function () {
    $('#conteudo').hide();
    var noticia;
    var hash = window.location.hash;
    if (hash != '') {
        noticia = $(hash).html();
        $('.abas li a[href="' + hash + '"]').parent().addClass('ativo');
    } else {
        noticia = $('#conteudo div:first-child').html();
        $('.abas li:first-child').addClass('ativo');
    }
    $('#noticia').append('<div>' + noticia + '</div>').find('div').slideDown();
    $('.abas li a').click(function () {
        $('.abas li').removeClass('ativo');
        $(this).parent().addClass('ativo');
        var ancora = $(this).attr('href');
        var nome = ancora.substr(1, ancora.length);
        noticia = $('#conteudo div[id="' + nome + '"]').html();
        $('#noticia').empty();
        $('#noticia').append('<div>' + noticia + '</div>').find('div').slideDown();
        return false;
    })

})

below is css:

body {

    background-image: url('../../../../Content/imagemCriancas/people-1560569.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}
ul {
    list-style: none;
    padding-left: 10px;
}

.abas li {
    float: left;
    border: 1px solid #ccc;
    border-bottom: 0;
    margin-right: 10px;
    padding: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-radius-topleft: 5px;
    -webkit-border-radius-topright: 5px;
}

    .abas li:hover {
        box-shadow: 0 -2px 3px #DFDFDF;
        -moz-box-shadow: 0 -2px 3px #DFDFDF;
        -webkit-box-shadow: 0 -2px 3px #DFDFDF;
        font-weight: bold;
        border-color: #c0c0c0;
    }

.ativo {
    background: #ccc;
    border-color: #333;
}

    .ativo a {
        color: #fff;
        font-weight: bold;
        text-shadow: 0 0 5px #999;
    }

#noticia {
    position: relative;
    width: 880px;
    height: auto;
    padding: 10px;
    clear: both;
    border: 1px solid #ccc;
    -moz-box-shadow: 0 -1px 3px #ccc;
}

Below is the html code for 2 tabs. As it is extensive I put only 2 tabs of 5

<script src="~/Content/modalAjax/jquery-3.3.1.min.js"></script>
<script src="~/Content/modalAjax/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.maskedinput.js"></script>
<script src="~/Areas/Representantes/Script/cliente/cadastro.js"></script>
<script src="~/Areas/Representantes/Script/cliente/abas.js"></script>
<link href="~/Areas/Representantes/Script/cliente/ClienteEstilo.css" rel="stylesheet" />
<script src="~/Content/modalAjax/bootstrapcdn.min.js"></script>
<script src="~/Content/modalAjax/ajaxmodaldeconfirmacaobootbox.min.js"></script>

<br /><br />
<div class="alinaresquerda">

    <center><img src="~/Content/imagem/logo.png" id="recurso" /></center>
    <div id="resposta" style="display:none;"></div>
    <div class="bs-callout bs-callout-primary">

        <center>   <h4>CADASTRO DE CLIENTE</h4></center>

        <div class="panel-body">
            <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">


                    <ul class="abas">
                        <li><a href="#geral">Geral</a></li>
                        <li><a href="#faturamento">Faturamento</a></li>
                        <li><a href="#cobranca">Cobrança</a></li>
                        <li><a href="#entrega">Entrega</a></li>
                        <li><a href="#outros">Outros</a></li>
                    </ul>

                    <div id="noticia"></div>

                    <div id="conteudo">
                        <!--GUIA GERAL-->
                        <div id="geral">
                            <div class="portlet-body">
                                <form id="form"  method="post">

                                    <div class="tab-pane active" id="Geral">
                                        <div class="form-horizontal">
                                            <h4>Vendedor</h4>
                                            <div class="form-group">


                                                <label class="col-md-2 control-label" for="Vendedor">Representante</label>
                                                <div class="col-md-10">
                                                    <select class="form-control select2" name="codigoRepresentante" id="representante"></select>
                                                    <span class="field-validation-valid" data-valmsg-for="Representante" data-valmsg-replace="true"></span>
                                                </div>
                                            </div>
                                            <div class="form-group">

                                                <label class="col-md-2 control-label" for="Vendedor">Vendedor</label>
                                                <div class="col-md-10">
                                                    <select class="form-control select2" name="codigoVendedor" id="vendedor"></select>
                                                    <span class="field-validation-valid" data-valmsg-for="Vendedor" data-valmsg-replace="true"></span>
                                                </div>
                                            </div>
                                            <hr />
                                            <h4>Receita Federal</h4>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="CNPJ">CNPJ</label>
                                                <div class="col-md-4">
                                                    <div class="input-group">
                                                        <input type="text" placeholder="CNPJ" name="cnpj" id="cnpj" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="InscricaoEstadual">Inscrição Estadual</label>
                                                <div class="col-md-4">
                                                    <input class="form-control" type="text" data-val="true" id="inscricaoEstadual" name="inscricaoEstadual" placeholder="Inscrição estadual" value="" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="Suframa">Suframa</label>
                                                <div class="col-md-4">
                                                    <input class="form-control" type="text" id="suframa" name="suframa" placeholder="Código Suframa" value="" />
                                                </div>
                                            </div>
                                            <hr />
                                            <h4>Identificação</h4>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="RazaoSocial">Razão social</label>
                                                <div class="col-md-10">
                                                    <input class="form-control" type="text" data-val="true" id="razaoSocial" name="razaoSocial" placeholder="Razão social" value="" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="NomeFantasia">Nome fantasia</label>
                                                <div class="col-md-10">
                                                    <input class="form-control" type="text" data-val="true" id="nomeFantasia" name="nomeFantasia" placeholder="Nome fantasia" value="" />

                                                </div>
                                            </div>
                                            <hr />
                                            <h4>Comprador</h4>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="Comprador">Comprador</label>
                                                <div class="col-md-10">
                                                    <input class="form-control" type="text" id="comprador" name="comprador" placeholder="Comprador" value="" />

                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="CompradorTelefone">Telefone</label>
                                                <div class="col-md-5">
                                                    <input class="form-control" onblur="copiarPara('compradorTelefone', ['telefone', 'cobrancaTelefone'])" type="text" id="compradorTelefone" name="compradorTelefone" placeholder="Telefone do comprador" value="" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="CompradorEmail">E-mail</label>
                                                <div class="col-md-10">
                                                    <input class="form-control" onblur="copiarPara('compradorEmail', ['emailLoja', 'emailNFe', 'cobrancaEmail'])" type="email" id="compradorEmail" name="compradorEmail" placeholder="E-mail do comprador" value="" />

                                                </div>
                                            </div>
                                        </div>
                                    </div>

                            </div>
                        </div>

                        <!--GUIA FATURAMENTO-->
                        <div id="faturamento">

                            <div class="form-horizontal">
                                <h4>Endereço</h4>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Endereco">Endereço</label>
                                    <div class="col-md-10">
                                        <input class="form-control" type="text" id="endereco" name="endereco" placeholder="Endereço (rua, número)" value="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Complemento">Complemento</label>
                                    <div class="col-md-10">
                                        <input class="form-control" type="text" id="complemento" name="complemento" placeholder="Complemento (apto, lote, etc.)" value="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Bairro">Bairro</label>
                                    <div class="col-md-10">
                                        <input class="form-control" type="text" id="bairro" name="bairro" placeholder="Bairro" value="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Estado">Estado</label>
                                    <div class="col-md-1">
                                        <input class="form-control" onblur="buscarTabelaPrecos()" type="text" data-val="true" data-val-required="O estado (UF) &#xE9; obrigat&#xF3;rio" id="Estado" name="Estado" placeholder="UF" value="" />
                                        <span class="field-validation-valid" data-valmsg-for="Estado" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Municipio">Municipio</label>
                                    <div class="col-md-10">
                                        <input class="form-control" type="text" id="municipio" name="municipio" placeholder="Município" value="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="CEP">CEP</label>
                                    <div class="col-md-5">
                                        <input class="form-control" type="text" id="cep" name="cep" placeholder="CEP" />
                                    </div>
                                </div>
                                <hr />
                                <h4>Telefones</h4>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Telefone">Telefone</label>
                                    <div class="col-md-5">
                                        <input class="form-control" onblur="copiarPara('Telefone', ['CompradorTelefone', 'CobrancaTelefone'])" type="text" id="telefoneFaturamento" name="telefoneFaturamento" placeholder="Telefone" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Fax">FAX</label>
                                    <div class="col-md-5">
                                        <input class="form-control" type="text" id="fax" name="fax" placeholder="FAX" value="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Celular">Celular</label>
                                    <div class="col-md-5">
                                        <input class="form-control" type="text" id="celular" name="celular" placeholder="celular" value="" />
                                    </div>
                                </div>
                                <hr />
                                <h4>Lista de e-mails</h4>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="EmailLoja">E-mail loja</label>
                                    <div class="col-md-10">
                                        <input class="form-control" onblur="copiarPara('emailLoja', ['compradorEmail', 'emailNFe', 'cobrancaEmail'])" type="email" id="emailLoja" name="emailLoja" placeholder="E-mail contato da loja" value="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="EmailNFe">E-mail NF-e</label>
                                    <div class="col-md-10">
                                        <input class="form-control" onblur="copiarPara('emailNFe', ['compradorEmail', 'emailLoja', 'cobrancaEmail'])" type="email" id="emailNFe" name="emailNFe" placeholder="E-mail Nota Fiscal Eletrônica" value="" />
                                        <span class="field-validation-valid" data-valmsg-for="EmailNFe" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                                <hr />
                                <h4>Tabela de preço</h4>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="TabelaPreco">Tabela de preço</label>
                                    <div class="col-md-10" id="tabelaPreco">
                                        <select class="form-control select2 col-md-10" id="tabelaPreco" name="tabelaPreco"></select>
                                    </div>
                                </div>
                            </div>
                        </div>




                        <!--GUIA COBRANÇA-->
    
asked by anonymous 04.04.2018 / 15:13

2 answers

2

The problem is that the code pulls the HTML of each tab when it is clicked. This way the flap form will always come in blank. Worse, the form gets duplicated, because instead of changing the location of the% of the% of tabs, it is just making a copy.

I made a correction to the code to avoid this problem. Instead of loading the HTML from the tabs, I just did the exchange with divs without changing the HTML.

See (I've commented on the original lines of the code):

$(function () {
    $('#conteudo').hide();
    var noticia;
    var hash = window.location.hash;
    if (hash != '') {
        noticia = $(hash).html();
        $('.abas li a[href="' + hash + '"]').parent().addClass('ativo');
    } else {
//        noticia = $('#conteudo div:first-child').html();
        $('.abas li:first-child').addClass('ativo');
    }
    $('#noticia').append('<div>');
    $('#conteudo div:first').appendTo('#noticia div').find('div').slideDown();
    $('.abas li a').click(function () {
       $('#noticia div:first').appendTo("#conteudo");
        $('.abas li').removeClass('ativo');
        $(this).parent().addClass('ativo');
        var ancora = $(this).attr('href');
        var nome = ancora.substr(1, ancora.length);
//        noticia = $('#conteudo div[id="' + nome + '"]').html();
       $('#noticia').append('<div>');
//        $('#noticia').empty();
//        $('#noticia').append('<div>' + noticia + '</div>').find('div').slideDown();
        $('#conteudo div[id="' + nome + '"]').appendTo('#noticia div').find('div').slideDown();
        return false;
    })

})
body {

    background-image: url('../../../../Content/imagemCriancas/people-1560569.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}
ul {
    list-style: none;
    padding-left: 10px;
}

.abas li {
    float: left;
    border: 1px solid #ccc;
    border-bottom: 0;
    margin-right: 10px;
    padding: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-radius-topleft: 5px;
    -webkit-border-radius-topright: 5px;
}

    .abas li:hover {
        box-shadow: 0 -2px 3px #DFDFDF;
        -moz-box-shadow: 0 -2px 3px #DFDFDF;
        -webkit-box-shadow: 0 -2px 3px #DFDFDF;
        font-weight: bold;
        border-color: #c0c0c0;
    }

.ativo {
    background: #ccc;
    border-color: #333;
}

    .ativo a {
        color: #fff;
        font-weight: bold;
        text-shadow: 0 0 5px #999;
    }

#noticia {
    position: relative;
    width: 880px;
    height: auto;
    padding: 10px;
    clear: both;
    border: 1px solid #ccc;
    -moz-box-shadow: 0 -1px 3px #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="alinaresquerda">

    <center><img src="~/Content/imagem/logo.png" id="recurso" /></center>
    <div id="resposta" style="display:none;"></div>
    <div class="bs-callout bs-callout-primary">

        <center>   <h4>CADASTRO DE CLIENTE</h4></center>

        <div class="panel-body">
            <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">


                    <ul class="abas">
                        <li><a href="#geral">Geral</a></li>
                        <li><a href="#faturamento">Faturamento</a></li>
                        <li><a href="#cobranca">Cobrança</a></li>
                        <li><a href="#entrega">Entrega</a></li>
                        <li><a href="#outros">Outros</a></li>
                    </ul>

                    <div id="noticia"></div>

                    <div id="conteudo">
                        <!--GUIA GERAL-->
                        <div id="geral">
                            <div class="portlet-body">
                                <form id="form"  method="post">

                                    <div class="tab-pane active" id="Geral">
                                        <div class="form-horizontal">
                                            <h4>Vendedor</h4>
                                            <div class="form-group">


                                                <label class="col-md-2 control-label" for="Vendedor">Representante</label>
                                                <div class="col-md-10">
                                                    <select class="form-control select2" name="codigoRepresentante" id="representante"></select>
                                                    <span class="field-validation-valid" data-valmsg-for="Representante" data-valmsg-replace="true"></span>
                                                </div>
                                            </div>
                                            <div class="form-group">

                                                <label class="col-md-2 control-label" for="Vendedor">Vendedor</label>
                                                <div class="col-md-10">
                                                    <select class="form-control select2" name="codigoVendedor" id="vendedor"></select>
                                                    <span class="field-validation-valid" data-valmsg-for="Vendedor" data-valmsg-replace="true"></span>
                                                </div>
                                            </div>
                                            <hr />
                                            <h4>Receita Federal</h4>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="CNPJ">CNPJ</label>
                                                <div class="col-md-4">
                                                    <div class="input-group">
                                                        <input type="text" placeholder="CNPJ" name="cnpj" id="cnpj" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="InscricaoEstadual">Inscrição Estadual</label>
                                                <div class="col-md-4">
                                                    <input class="form-control" type="text" data-val="true" id="inscricaoEstadual" name="inscricaoEstadual" placeholder="Inscrição estadual" value="" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="Suframa">Suframa</label>
                                                <div class="col-md-4">
                                                    <input class="form-control" type="text" id="suframa" name="suframa" placeholder="Código Suframa" value="" />
                                                </div>
                                            </div>
                                            <hr />
                                            <h4>Identificação</h4>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="RazaoSocial">Razão social</label>
                                                <div class="col-md-10">
                                                    <input class="form-control" type="text" data-val="true" id="razaoSocial" name="razaoSocial" placeholder="Razão social" value="" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="NomeFantasia">Nome fantasia</label>
                                                <div class="col-md-10">
                                                    <input class="form-control" type="text" data-val="true" id="nomeFantasia" name="nomeFantasia" placeholder="Nome fantasia" value="" />

                                                </div>
                                            </div>
                                            <hr />
                                            <h4>Comprador</h4>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="Comprador">Comprador</label>
                                                <div class="col-md-10">
                                                    <input class="form-control" type="text" id="comprador" name="comprador" placeholder="Comprador" value="" />

                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="CompradorTelefone">Telefone</label>
                                                <div class="col-md-5">
                                                    <input class="form-control" onblur="copiarPara('compradorTelefone', ['telefone', 'cobrancaTelefone'])" type="text" id="compradorTelefone" name="compradorTelefone" placeholder="Telefone do comprador" value="" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label" for="CompradorEmail">E-mail</label>
                                                <div class="col-md-10">
                                                    <input class="form-control" onblur="copiarPara('compradorEmail', ['emailLoja', 'emailNFe', 'cobrancaEmail'])" type="email" id="compradorEmail" name="compradorEmail" placeholder="E-mail do comprador" value="" />

                                                </div>
                                            </div>
                                        </div>
                                    </div>

                            </div>
                        </div>

                        <!--GUIA FATURAMENTO-->
                        <div id="faturamento">

                            <div class="form-horizontal">
                                <h4>Endereço</h4>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Endereco">Endereço</label>
                                    <div class="col-md-10">
                                        <input class="form-control" type="text" id="endereco" name="endereco" placeholder="Endereço (rua, número)" value="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Complemento">Complemento</label>
                                    <div class="col-md-10">
                                        <input class="form-control" type="text" id="complemento" name="complemento" placeholder="Complemento (apto, lote, etc.)" value="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Bairro">Bairro</label>
                                    <div class="col-md-10">
                                        <input class="form-control" type="text" id="bairro" name="bairro" placeholder="Bairro" value="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Estado">Estado</label>
                                    <div class="col-md-1">
                                        <input class="form-control" onblur="buscarTabelaPrecos()" type="text" data-val="true" data-val-required="O estado (UF) &#xE9; obrigat&#xF3;rio" id="Estado" name="Estado" placeholder="UF" value="" />
                                        <span class="field-validation-valid" data-valmsg-for="Estado" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Municipio">Municipio</label>
                                    <div class="col-md-10">
                                        <input class="form-control" type="text" id="municipio" name="municipio" placeholder="Município" value="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="CEP">CEP</label>
                                    <div class="col-md-5">
                                        <input class="form-control" type="text" id="cep" name="cep" placeholder="CEP" />
                                    </div>
                                </div>
                                <hr />
                                <h4>Telefones</h4>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Telefone">Telefone</label>
                                    <div class="col-md-5">
                                        <input class="form-control" onblur="copiarPara('Telefone', ['CompradorTelefone', 'CobrancaTelefone'])" type="text" id="telefoneFaturamento" name="telefoneFaturamento" placeholder="Telefone" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Fax">FAX</label>
                                    <div class="col-md-5">
                                        <input class="form-control" type="text" id="fax" name="fax" placeholder="FAX" value="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="Celular">Celular</label>
                                    <div class="col-md-5">
                                        <input class="form-control" type="text" id="celular" name="celular" placeholder="celular" value="" />
                                    </div>
                                </div>
                                <hr />
                                <h4>Lista de e-mails</h4>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="EmailLoja">E-mail loja</label>
                                    <div class="col-md-10">
                                        <input class="form-control" onblur="copiarPara('emailLoja', ['compradorEmail', 'emailNFe', 'cobrancaEmail'])" type="email" id="emailLoja" name="emailLoja" placeholder="E-mail contato da loja" value="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="EmailNFe">E-mail NF-e</label>
                                    <div class="col-md-10">
                                        <input class="form-control" onblur="copiarPara('emailNFe', ['compradorEmail', 'emailLoja', 'cobrancaEmail'])" type="email" id="emailNFe" name="emailNFe" placeholder="E-mail Nota Fiscal Eletrônica" value="" />
                                        <span class="field-validation-valid" data-valmsg-for="EmailNFe" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                                <hr />
                                <h4>Tabela de preço</h4>
                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="TabelaPreco">Tabela de preço</label>
                                    <div class="col-md-10" id="tabelaPreco">
                                        <select class="form-control select2 col-md-10" id="tabelaPreco" name="tabelaPreco"></select>
                                    </div>
                                </div>
                            </div>
                        </div>
    
04.04.2018 / 16:11
2

If you are using bootstrap 4 and its dependencies you only need to work with html.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
    <div class="col-md-12">
        <div class="tabbable" id="tabs-967254">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" href="#panel-geral" data-toggle="tab">Geral</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#panel-faturamento" data-toggle="tab">Faturamento</a>
                </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="panel-geral">
                            <!--GUIA GERAL-->
                            conteúdo da aba geral
                    </div>
                    <div class="tab-pane" id="panel-faturamento">
                           <!--GUIA FATURAMENTO-->
                            conteúdo da aba faturamento
                    </div>
            </div>
        </div>
    </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    
04.04.2018 / 16:38