1

Peguei um código na internet que configura abas, tudo funciona bem, a não ser o caso de que quando mudo de aba e retorno para anterior, os dados preenchidos no formulário foram apagados e as máscaras dos campos também são perdidas. esse é o código da conf aba:

$(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;
    })

})

abaixo é o 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;
}

abaixo é o codigo html para 2 abas. Como é extenso coloquei apenas 2 abas das 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-->

2 Respostas 2

2

O problema é que o código puxa o HTML de cada aba quando ela é clicada. Desta forma o formulário da aba virá sempre em branco. E pior, o formulário fica duplicado, porque em vez dele mudar o local das divs das abas, ele está apenas fazendo uma cópia.

Fiz uma correção no código para evitar esse problema. Em vez de carregar o HTML das abas, eu apenas fiz o intercambiamento com .appendTo() sem alterar o HTML.

Veja (deixei comentado as linhas originais do código):

$(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>
<script src="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>

1
  • Perfeito... copie o JS e funcionou perfeitamente. Obrigada Commented 4/04/2018 às 14:50
2

Se você estiver usando o bootstrap 4 e suas dependencias você precisa apenas trabalhar com 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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

2
  • obrigada Atila. Commented 4/04/2018 às 14:51
  • Você pode usar um plugin para fazer as mascaras. Aí você se preocupa menos com javascript. Commented 4/04/2018 às 14:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .