Aqui em baixo tenho esse dois formulários:
<div id="menu"></div> <!-- Carrego minha Navbar -->
<div class="container formularioCadastro" id="cadastro">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<form>
</form>
<div class="col-md-4"></div>
</div>
</div>
<div class="container formularioLogin" id="Login">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<form>
</form>
<div class="col-md-4"></div>
</div>
</div>
Aqui defino meu jquery , carrego minha Navbar na primeira linha , e oculto meus 2 formulários , e quero que quando clique na classe .BtnLogin apareça o formulário Login e oculte o cadastro , vice e versa , porém não funciona , somente aparece quando dou um reload na página , e logo após some ; o que fazer?
$(document).ready(function () {
$("#menu").load("menu.html");
$("#Historia").load("historia.html");
$("#cadastro").hide();
$("#login").hide();
});
$(document).on("click", ".BtnLogin", function () {
$("#cadastro").hide();
$("#login").show();
});
$(document).on("click", ".BtnCadastro", function () {
$("#login").hide();
$("#cadastro").show();
});
Minha Navbar com os botões (BtnLogin e Btncadastro) abaixo:
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="navbar-example2">
<a class="navbar-brand" href="index.html">
<img src="img/logo.png" width="40" height="40" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class=" navbar-nav mr-auto " id="BntNav">
<li class="nav-item active NavActive">
<a class="nav-link" href="cidades.html?pagina=b" > Barcelona <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="cidades.html?pagina=c" > Creta </a>
</li>
<li class="nav-item">
<a class="nav-link" href="cidades.html?pagina=d" > Dubrovnik </a>
</li>
</ul>
<ul class="nav justify-content-end">
<li class="nav-item ">
<a class="nav-link BtnCadastro" href="cadastro.html"> <img src="img/carrinho.svg" width="30" height="30" alt="">
</a>
</li>
<li class="nav-item ">
<a class="nav-link BtnLogin" href="cadastro.html"> <img src="img/login.png" width="30" height="30" alt=""> </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">
<a class="navbar-brand" href="#"> <img src="img/lupa.png" width="30" height="30" alt=""> </a>
</form>
</div>