0

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>

2
  • Onde estão os seus botões?
    – JrD
    Commented 6/04/2019 às 17:56
  • Estão na minha NavBar.
    – Otávio
    Commented 6/04/2019 às 19:18

2 Respostas 2

0

Tem 2 problemas no seu código:

Falta cancelar a ação dos links com event.preventDefault():

$(document).on("click", ".BtnLogin", function (e) {
   e.preventDefault();
    $("#cadastro").hide();
    $("#login").show();
});

$(document).on("click", ".BtnCadastro", function (e) {
   e.preventDefault();
    $("#login").hide();
    $("#cadastro").show();
}); 

Se você não cancelar a ação do click no link, irá direcionar a página em href.

Outro problema é que o id="Login" está com L maiúsculo e no seletor $("#login") está com L minúsculo. O JavaScript é case sensitive, ou seja, "Login" e "login" são duas coisas diferentes.

3
  • Obrigado pela ajuda , porém não funcionou , simplesmente agora os as ancoras que deveriam levar a pag do cadastro não funcionam.
    – Otávio
    Commented 7/04/2019 às 3:05
  • Uai colega! Mas então sua pergunta tá confusa. O que vc quer fazer afinal?
    – Sam
    Commented 7/04/2019 às 6:05
  • Quero clicar no BtnCadastro e ocultar meu formulário de login e da um show no formulário cadastro ; e quando clicar no BtnLogin ocultar meu formulário de cadastro e da um show no formulário login.
    – Otávio
    Commented 7/04/2019 às 14:59
0

Eu criei um pequeno exemplo parecido com o seu problema, veja se você consegue adaptar no seu código.

Veja abaixo, que eu mudei a maneira de chamar o evento de clique para os dois botões:

  $(document).ready(function(){
    $('#cadastro').hide();
    $('#login').hide();
  })
  

  $('#btnCadastro').click(function(){
    $('#cadastro').show();
    $('#login').hide();
  })

  $('#btnLogin').click(function(){
    $('#cadastro').hide();
    $('#login').show();
  })
  .form-cadastro,.form-login{
    height:100px;
    width:100px;
  }

  .form-cadastro{border: 3px solid black;color:black}
  .form-login{border: 3px solid red;color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <a href="#" id="btnCadastro">CADASTRO</a>
  <br>
  <a href="#" id="btnLogin">LOGIN</a>
  <br><br>
  <div id="cadastro" class="form-cadastro">CADASTRO</div>
  <div id="login" class="form-login">LOGIN</div>

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 .