Next Back content on page

Asked

Viewed 138 times

1

In this table there are the rounds, where it appears all, wanted a forward and back button and the guy could see the next rounds, without having to scroll the whole screen, wanted that appeared only the round in question and each forward and back appeared other according to the click.

What I have so far is basically what I found so far on the site: 

<a href="javascript:window.history.go(-1)">Voltar</a> <a href="javascript:window.history.go(1)">Avançar</a>

But that’s going forward and back to the page, I don’t know how to put the contents of the rounds..

Where is the error here?`

Rounds

Dice of the Round 1 Dice of the Round 2 Dice of the Round 3 Dice of the Round 4 Dice of the Round 5 `

javascript jquery ajax
  • 3

    To get help from other programmers you need to show what your code is. What you want is clear, but the question remains to be improved. ------> [help] & [Ask]

  • 1

    This is basically what I found on the site: <a href="javascript:window.history.go(-1)">Back</a> <a href="javascript.

1 answer

2


You can do something like this:

   $(document).on('click', '.go', function(event){
      event.preventDefault();

      var dir = parseInt($(this).data('go'));

      var $active = $('.rodadas .rodada.active');

      $('.wrapper .go').prop('disabled', false);

      if(dir){
         var $f = $active.next();
         $(this).prop('disabled', ($f.next().length == 0));
      } else {
         var $f = $active.prev();
         $(this).prop('disabled', ($f.prev().length == 0));
      }

      $active.removeClass('active');

      $f.addClass('active');

   });
body{background-color: #454545;margin: 0;padding: 0;}
.wrapper{
   width: 360px;
   margin: 20px auto;
   background-color: rgba(0,0,0,0.4);
}

.wrapper .header{
   background-color: rgba(200,200,200,0.5);
}

.wrapper .header .prev, .wrapper .header .next{
   display: inline-block;
   width: 40px;
}
.wrapper .header .title{
   width:280px;
   display: inline-block;
   text-align: center;
   font-weight: bold;
   margin: 0 auto;
}
.wrapper .rodada{
   padding: 5px;
   color: #FFF;
   opacity: 0;
   transition: all 1s ease;
}
.wrapper .rodada:not(.active){
   display: none;
}
.wrapper .rodada.active{
   display: block;
   opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
   <div class="header"><!--
   --><button class="prev go" data-go="0" disabled>&larr;</button><!--
   --><span class="title">Título</span><!--
   --><button class="next go" data-go="1">&rarr;</button><!--
--></div>
   <div class="rodadas">
      <div class="rodada active" id="rodada-1" data-title="Rodada 1">Dados da Rodada 1</div>
      <div class="rodada" id="rodada-2" data-title="Rodada 2">Dados da Rodada 2</div>
      <div class="rodada" id="rodada-3" data-title="Rodada 3">Dados da Rodada 3</div>
      <div class="rodada" id="rodada-4" data-title="Rodada 4">Dados da Rodada 4</div>
      <div class="rodada" id="rodada-5" data-title="Rodada 5">Dados da Rodada 5</div>
   </div>
</div>

Another great option is also to create a navigation side menu, follow example:

$(document).on('click', '#side-menu a', function(event){
   event.preventDefault();
   el = $(this).attr('href');
    
    if ($(el).length != 1)
        return;
    
    $('html, body').animate({
        scrollTop: $(el).offset().top
    });

});
@import url(https://fonts.googleapis.com/css?family=Lato);
body{
    background:url(http://www.saichorao.com.br/img/bg-patt-light.jpg) repeat scroll center top transparent;
      margin: 0;
      padding: 0;
      font-family 'Lato';
}
#side-menu{
    display:block;
    position:fixed;
    top:30px;
    right:20px;
    width:120px;
    background:rgba(0,0,0,0.6);
}

#side-menu ul, #side-menu li{
    list-style:none;
    margin:0;
    padding:0;
}
#side-menu li a{
    display:block;
    padding:5px;
    color:#FFF;
    text-decoration:none;
}

#wrapper2 table {
  border-width: 0px 0 0 0px;
  border-color: #000000;
  border-style: solid;
  color: #b3c9d3;
  text-align: left;
  display: inline-table;
  margin: 0 0 20px 0;
}

#wrapper2 th, #wrapper2 thead td {
  background-color: #1b1c1c;
}
#wrapper2 td, #wrapper2 th {
  border-width: 0 0px 0px 0;
  border-color: #000000;
  border-style: solid;
  padding: 5px;
  text-align: left;
}
#wrapper2 td {
  background: url(http://www.saichorao.com.br/img/box-bg.png) repeat scroll center center transparent;
}
#wrapper2 td, #wrapper2 th {
  border-width: 0 0px 0px 0;
  border-color: #000000;
  border-style: solid;
  padding: 5px;
  text-align: left;
}
#wrapper2 td {
  vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="side-menu">
   <ul>
      <li><a href="#rodada-1">1ª Rodada</a></li>
      <li><a href="#rodada-2">2ª Rodada</a></li>
      <li><a href="#rodada-3">3ª Rodada</a></li>
      <li><a href="#rodada-4">4ª Rodada</a></li>
      <li><a href="#rodada-5">5ª Rodada</a></li>
   </ul>
</div>
<div id="wrapper2">
<table class="modernTable withHeader" style="width: 420px;">
   <colgroup>
      <col>
      <col>
      <col span="6">
      <col>
      <col>
      <col>
   </colgroup>
   <tbody>
      <tr height="23">
         <th colspan="5" id="rodada-1" style="height: 23px; width: 520px; text-align: center;">1º RODADA</th>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">CASA</td>
         <td style="text-align: center;">PONTOS</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">PONTOS</td>
         <td style="text-align: center;">FORA</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">Pó_de_arroz</td>
         <td style="text-align: center;">21,96</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">12,49</td>
         <td style="text-align: center;">Fitnss</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">Renascitur FC</td>
         <td style="text-align: center;">15,6</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">52,2</td>
         <td style="text-align: center;">WLESFC</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">Ice Blood</td>
         <td style="text-align: center;">10,25</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">26,93</td>
         <td style="text-align: center;">EamaralFC</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">saulovasco</td>
         <td style="text-align: center;">29,28</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">31,46</td>
         <td style="text-align: center;">Pedra Branca F C</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">MAUROS SSA. F.C.</td>
         <td style="text-align: center;">26,46</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">17,17</td>
         <td style="text-align: center;">carlos sousa</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">RR Clube de Regatas</td>
         <td style="text-align: center;">19,87</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">33,9</td>
         <td style="text-align: center;">ILHA FC</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">JPHS</td>
         <td style="text-align: center;">17,96</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">13,47</td>
         <td style="text-align: center;">GUARATINGA SPORT</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">Gordinho Ba</td>
         <td style="text-align: center;">36,47</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">2,96</td>
         <td style="text-align: center;">IZIDIOS FC</td>
      </tr>
      <tr height="23">
         <th colspan="5" id="rodada-2" style="height: 23px; text-align: center;">2º RODADA</th>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">CASA</td>
         <td style="text-align: center;">PONTOS</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">PONTOS</td>
         <td style="text-align: center;">FORA</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">IZIDIOS FC</td>
         <td style="text-align: center;">-0,12</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">41,03</td>
         <td style="text-align: center;">Renascitur FC</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">Pó_de_arroz</td>
         <td style="text-align: center;">60,61</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">21,21</td>
         <td style="text-align: center;">saulovasco</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">Fitnss</td>
         <td style="text-align: center;">19</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">44,99</td>
         <td style="text-align: center;">RR Clube de Regatas</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">ILHA FC</td>
         <td style="text-align: center;">33,79</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">9,72</td>
         <td style="text-align: center;">carlos sousa</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">EamaralFC</td>
         <td style="text-align: center;">42,44</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">8,89</td>
         <td style="text-align: center;">Pedra Branca F C</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">WLESFC</td>
         <td style="text-align: center;">34,08</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">41,29</td>
         <td style="text-align: center;">MAUROS SSA. F.C.</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">Ice Blood</td>
         <td style="text-align: center;">51,39</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">39,69</td>
         <td style="text-align: center;">JPHS</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">GUARATINGA SPORT</td>
         <td style="text-align: center;">38,01</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">16,92</td>
         <td style="text-align: center;">Gordinho Ba</td>
      </tr>
      <tr height="23">
         <th colspan="5" id="rodada-3" style="height: 23px; text-align: center;">3º RODADA</th>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">CASA</td>
         <td style="text-align: center;">PONTOS</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">PONTOS</td>
         <td style="text-align: center;">FORA</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">WLESFC</td>
         <td style="text-align: center;">55,52</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">49,96</td>
         <td style="text-align: center;">Pó_de_arroz</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">RR Clube de Regatas</td>
         <td style="text-align: center;">112,67</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">47,76</td>
         <td style="text-align: center;">EamaralFC</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">Renascitur FC</td>
         <td style="text-align: center;">89,17</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">48,34</td>
         <td style="text-align: center;">ILHA FC</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">saulovasco</td>
         <td style="text-align: center;">43,56</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">42,68</td>
         <td style="text-align: center;">Ice Blood</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">IZIDIOS FC</td>
         <td style="text-align: center;">75,43</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">63,67</td>
         <td style="text-align: center;">Fitnss</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">carlos sousa</td>
         <td style="text-align: center;">66,07</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">45,26</td>
         <td style="text-align: center;">GUARATINGA SPORT</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">Pedra Branca F C</td>
         <td style="text-align: center;">97,42</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">63,83</td>
         <td style="text-align: center;">JPHS</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">MAUROS SSA. F.C.</td>
         <td style="text-align: center;">52,63</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">59,17</td>
         <td style="text-align: center;">Gordinho Ba</td>
      </tr>
      <tr height="20">
         <th colspan="5" id="rodada-4" style="height: 20px; text-align: center;">4º RODADA</th>
      </tr>
      <tr height="20">
         <td height="20" style="height: 20px; text-align: center;">CASA</td>
         <td style="text-align: center;">PONTOS</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">PONTOS</td>
         <td style="text-align: center;">FORA</td>
      </tr>
      <tr height="20">
         <td height="20" style="height: 20px; text-align: center;">ILHA FC</td>
         <td style="text-align: center;">36,06</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">26,49</td>
         <td style="text-align: center;">Fitnss</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">Ice Blood</td>
         <td style="text-align: center;">100,8</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">41,7</td>
         <td style="text-align: center;">RR Clube de Regatas</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">JPHS</td>
         <td style="text-align: center;">56,75</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">30,64</td>
         <td style="text-align: center;">MAUROS SSA. F.C.</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">carlos sousa</td>
         <td style="text-align: center;">48,15</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">51,7</td>
         <td style="text-align: center;">saulovasco</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">EamaralFC</td>
         <td style="text-align: center;">50,8</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">61,26</td>
         <td style="text-align: center;">IZIDIOS FC</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">GUARATINGA SPORT</td>
         <td style="text-align: center;">35,9</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">54,9</td>
         <td style="text-align: center;">WLESFC</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">Gordinho Ba</td>
         <td style="text-align: center;">67,2</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">45,7</td>
         <td style="text-align: center;">Pedra Branca F C</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">Pó_de_arroz</td>
         <td style="text-align: center;">40,84</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">33,27</td>
         <td style="text-align: center;">Renascitur FC</td>
      </tr>
      <tr height="23">
         <th colspan="5" id="rodada-5" style="height: 23px; text-align: center;">5º RODADA</th>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">CASA</td>
         <td style="text-align: center;">PONTOS</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">PONTOS</td>
         <td style="text-align: center;">FORA</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">Pedra Branca F C</td>
         <td style="text-align: center;">68,22</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">37,7</td>
         <td style="text-align: center;">WLESFC</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">MAUROS SSA. F.C.</td>
         <td style="text-align: center;">63,11</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">62,13</td>
         <td style="text-align: center;">saulovasco</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">Renascitur FC</td>
         <td style="text-align: center;">49,52</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">71,2</td>
         <td style="text-align: center;">Ice Blood</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">GUARATINGA SPORT</td>
         <td style="text-align: center;">34,1</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">65</td>
         <td style="text-align: center;">ILHA FC</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">IZIDIOS FC</td>
         <td style="text-align: center;">65,3</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">53,2</td>
         <td style="text-align: center;">Pó_de_arroz</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">EamaralFC</td>
         <td style="text-align: center;">49,1</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">44,33</td>
         <td style="text-align: center;">Gordinho Ba</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">Fitnss</td>
         <td style="text-align: center;">47,22</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">37,71</td>
         <td style="text-align: center;">carlos sousa</td>
      </tr>
      <tr height="23">
         <td height="23" style="height: 23px; text-align: center;">RR Clube de Regatas</td>
         <td style="text-align: center;">65,25</td>
         <td style="text-align: center;">X</td>
         <td style="text-align: center;">66,62</td>
         <td style="text-align: center;">JPHS</td>
      </tr>
   </tbody>
</table>

You can also create a Scrollspy to improve.

  • Already said and much, I am working on what you posted; but the good thing would be http://globoesporte.globo.com/futebol/brasileirao-serie-a/ type that there; as you can see appears only round 14, and the others depends on whether you click to advance or return; logic that does not need formatting, this I do later, but just to appear only the active round ta great.

  • @Leandrosantosoliveira here is a very simple example of what you can do: https://jsfiddle.net/qk8bLbj/

  • The model proposed by @kaduAmaral through the jsfiddle link worked... Thank you all.

  • As I said your model presented jsfiddle worked out... Perfect, I even edited the question the table was as you taught, I would like that instead of always starting from round 1, incise for example on 5, ai poderia avançar e voltar... Thank you

Browser other questions tagged javascript jquery ajax

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