1
I took a code on the internet that configures tabs, everything works well, except that when I change tab and return to previous, the data filled in the form have been deleted and the masks of the fields are also lost. this is the code of the 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;
})
})
below is the 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 spelled I put only 2 tabs of the 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-->
Perfect... copy the JS and it worked perfectly. Thank you
– Danielle Arruda torres