Go to next DIV

Asked

Viewed 569 times

0

How do I navigate between Divs using jQuery?

This DIV will be exeibida on the mobile phone or tablet on screen, IE the entire viewfinder will appear 1 DIV at a time. When clicking the button, go to the corresponding DIV.

Example: If I’m in tela1 and click on the button, I’ll go to the 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>

Thank you.

javascript html html5

  • Imagine a div per fez on the screen. When you click the button, go to the next div. That’s it. This was the easiest way I could find, but I believe there’s a more correct way to do this.

  • but your example is working

  • As @Hudsonph said in the comment above, your code works, another way I see of doing what you want would be by using the method load jQuery, but basically it would be the same thing, call a div or an html page and hide the other.

1 answer

0

You do not need to use id’s and repeat multiple if’s to check which id was clicked, and show/hide a certain element by id. Imagine if you have 20 Divs, it would be a huge job in addition to the code getting quite inflated.

With Javascript (even via jQuery) it is possible to manipulate the elements in a more generic way using quantities, positions and hierarchies. In the example below the code takes the click on the button, checks its index in the collection of buttons with the same class, and based on that, it can determine which div to show, which in the case, the next one. And when you get to the last one, it means that the index of the clicked button is equal to the number of buttons -1, and with that goes back to the first div. It’s just a matter of logic.

Now, to hide the other Ivs except the first one, don’t do this in jQuery. CSS exists for this. Do so in your CSS:

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

This will hide all direct daughters of the class .row, except the first.

As for the code, it will look like this (note that I did not use any id in 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>

Browser other questions tagged javascript html html5

You are not signed in. Login or sign up in order to post.