<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<nav class="navbar navbar-light bg-light" style="
padding-top: 25px;">
<div class="content">
<div class="tabs-content">
<div class="tabs-menu clearfix">
<ul>
<li><a class="active-tab-menu" href="#" data-tab="tab1">Cadastro de Pessoa Fisica</a></li>
<li><a href="#" data-tab="tab2">Cadastro de Pessoa Juridica</a></li>
<li><a href="#" data-tab="tab3">Cadastro de Motorista</a></li>
</ul>
</div>
<form class="tab1 tabs first-tab">
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<form class="tab2 tabs">
Conteúdo da aba 2
</form> <!-- .tab2 -->
<form class="tab3 tabs">
Conteúdo da aba 3
</form> <!-- .tab3 -->
</div> <!-- .tabs -->
</div>
</nav>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 12px;
line-height: 1.9;
}
.bg-light {
background-color: #9fa5ab!important;
}
a:focus {
outline: none;
}
.content {
margin-left: 25%;
}
.clearfix:after {
content: '.';
height: 0;
font-size: 0;
line-height: 0;
display: block;
clear: both;
overflow: hidden;
visibility: hidden;
}
/* Abas */
.tabs-content {
background: white;
font-family: sans-serif;
}
.tabs-menu {
background: black;
}
.tabs-menu ul {
list-style: none;
}
.tabs-menu ul li {
float: left;
}
.tabs-menu ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #fff;
}
.tabs-menu ul li a.active-tab-menu {
background: red;
color: white;
}
.tabs {
display: none;
padding: 30px;
}
.first-tab {
display: block;
}
jQuery(function($){
$('.tabs-menu ul li a').click(function(){
var a = $(this);
var active_tab_class = 'active-tab-menu';
var the_tab = '.' + a.attr('data-tab');
$('.tabs-menu ul li a').removeClass(active_tab_class);
a.addClass(active_tab_class);
$('.tabs-content .tabs').css({
'display' : 'none'
});
$(the_tab).show();
return false;
});
});
function limpa_formulario_cep() {
//Limpa valores do formulário de cep.
document.getElementById('rua').value=("");
document.getElementById('bairro').value=("");
document.getElementById('cidade').value=("");
document.getElementById('estado').value=("");
}
function meu_callback(conteudo) {
if (!("erro" in conteudo)) {
//Atualiza os campos com os valores.
document.getElementById('rua').value=(conteudo.logradouro);
document.getElementById('bairro').value=(conteudo.bairro);
document.getElementById('cidade').value=(conteudo.localidade);
document.getElementById('estado').value=(conteudo.uf);
} //end if.
else {
//CEP não Encontrado.
limpa_formulario_cep();
alert("CEP não encontrado.");
document.getElementById('cep').value=("");
}
}
function pesquisacep(valor) {
//Nova variável "cep" somente com dígitos.
var cep = valor.replace(/\D/g, '');
//Verifica se campo cep possui valor informado.
if (cep !== "") {
//Expressão regular para validar o CEP.
var validacep = /^[0-9]{8}$/;
//Valida o formato do CEP.
if(validacep.test(cep)) {
//Preenche os campos com "..." enquanto consulta webservice.
document.getElementById('rua').value="...";
document.getElementById('bairro').value="...";
document.getElementById('cidade').value="...";
document.getElementById('estado').value="...";
//Cria um elemento javascript.
var script = document.createElement('script');
//Sincroniza com o callback.
script.src = '//viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback';
//Insere script no documento e carrega o conteúdo.
document.body.appendChild(script);
} //end if.
else {
//cep é inválido.
limpa_formulario_cep();
alert("Formato de CEP inválido.");
}
} //end if.
else {
//cep sem valor, limpa formulário.
limpa_formulario_cep();
}
}
function formatar(mascara, documento){
var i = documento.value.length;
var saida = mascara.substring(0,1);
var texto = mascara.substring(i);
if (texto.substring(0,1) != saida){
documento.value += texto.substring(0,1);
}
}
function idade (){
var data=document.getElementById("dtnasc").value;
var dia=data.substr(0, 2);
var mes=data.substr(3, 2);
var ano=data.substr(6, 4);
var d = new Date();
var ano_atual = d.getFullYear(),
mes_atual = d.getMonth() + 1,
dia_atual = d.getDate();
ano=+ano,
mes=+mes,
dia=+dia;
var idade=ano_atual-ano;
if (mes_atual < mes || mes_atual == mes_aniversario && dia_atual < dia) {
idade--;
}
return idade;
}
function exibe(i) {
document.getElementById(i).readOnly= true;
}
function desabilita(i){
document.getElementById(i).disabled = true;
}
function habilita(i)
{
document.getElementById(i).disabled = false;
}
function showhide()
{
var div = document.getElementById("newpost");
if(idade()>=18){
div.style.display = "none";
}
else if(idade()<18) {
div.style.display = "inline";
}
}
