-1

Como faço para navegar entre DIVs usando jQuery?

Essa DIV será exeibida no celular ou tablet em tela, ou seja em todo o visor ira aparecer 1 DIV por vez. Ao clicar no botão, ir para a DIV correspondente.

Exemplo: Se estou na tela1 e clicar no botão, irei para a tela2

$(document).ready(function() {


  $('#tela2, #tela3, #tela4').hide();

  $(".btn").click(function(e) {
    botao = e.target.id;
    //alert(botao);

    if (botao == "btn-1") {
      $('#tela2').show();
      $('#tela1, #tela3, #tela4').hide();

    } else if (botao == "btn-2") {
      $('#tela3').show();
      $('#tela1, #tela2, #tela4').hide();

    } else if (botao == "btn-3") {
      $('#tela4').show();
      $('#tela1, #tela2, #tela3').hide();

    } else if (botao == "btn-4") {
      $('#tela1').show();
      $('#tela4, #tela2, #tela3').hide();

    }

  });



});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="row">
  <div id="tela1">
    <h1>Tela 1</h1>
    <a id="btn-1" class="waves-effect waves-light btn">Ir para tela 2</a>
  </div>

  <div id="tela2">
    <h1>Tela 2</h1>
    <a id="btn-2" class="waves-effect waves-light btn">Ir para tela 3</a>
  </div>

  <div id="tela3">
    <h1>Tela 3</h1>
    <a id="btn-3" class="waves-effect waves-light btn">Ir para tela 4</a>
  </div>

  <div id="tela4">
    <h1>Tela 4</h1>
    <a id="btn-4" class="waves-effect waves-light btn">Voltar para a tela 1</a>
  </div>
</div>

Obrigado.

3
  • Imaginda um div por fez na tela. Ao clicar no botão, vai para a proxima div. Somente isso. Esse fiz foi a forma mais fácil que achei, mas acredito que exista uma forma mais correta de se fazer isso.
    – Tiago
    13/05/2019 às 12:46
  • mas seu exemplo esta funcionando
    – HudsonPH
    13/05/2019 às 12:51
  • Como o @HudsonPH disse no comentário acima, seu código funciona, uma outra forma que vejo de fazer o que quer seria utilizando o método load do jQuery, mas, basicamente seria a mesma coisa, chamaria uma div ou uma página html e esconderia as outras.
    – LeAndrade
    13/05/2019 às 12:58

1 Resposta 1

0

Não precisa usar id's e ficar repetindo vários if's para checar qual o id foi clicado, e mostrar/ocultar determinado elemento pelo id. Imagine se você tem 20 divs, daria um trabalho enorme, além do código ficar bastante inflado.

Com JavaScript (mesmo via jQuery) é possível manipular os elementos de forma mais genérica usando, quantidades, posições e hierarquias. No exemplo abaixo o código pega o click no botão, verifica o seu índice na coleção de botões com a mesma classe, e baseado nisso, consegue determinar qual div mostrar, que no caso, a próxima. E quando chegar na última, significa que índice do botão clicado é igual o número de botões -1, e com isso volta pra primeira div. É só uma questão de lógica.

Agora, para ocultar as outras divs menos a primeira, não faça isso no jQuery. O CSS existe para isso. Faça assim no seu CSS:

.row > div:not(:first-child){
   display: none;
}

Isso irá ocultar todas as divs filhas diretas da classe .row, exceto a primeira.

Quanto ao código, ficará assim (note que não usei nenhum id no HTML):

$(document).ready(function() {

   // conta o número de telas
   var telas = $(".row > div").length;
   $(".btn").click(function() {

      // oculta a tela do botão clicado
      $(this).closest("div").hide();

      // pega o index (índice) do botão clicado
      var indice = $(".row a.btn").index(this);
      
      // calcula qual elemento será mostrado
      indice += indice == telas-1 ? -telas+1 : 1;
      
      // mostra a tela da vez usando .eq()
      $(".row > div").eq(indice).show();

   });

});
.row > div:not(:first-child){
   display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
  <div>
    <h1>Tela 1</h1>
    <a class="waves-effect waves-light btn">Ir para tela 2</a>
  </div>

  <div>
    <h1>Tela 2</h1>
    <a class="waves-effect waves-light btn">Ir para tela 3</a>
  </div>

  <div>
    <h1>Tela 3</h1>
    <a class="waves-effect waves-light btn">Ir para tela 4</a>
  </div>

  <div>
    <h1>Tela 4</h1>
    <a class="waves-effect waves-light btn">Voltar para a tela 1</a>
  </div>

</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 .