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) é obrigató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-->