Next Back content on page

Navigation
1

In this table there are the rounds, where it all appears, I wanted a forward and back button and the guy could see the next rounds, without having to scroll the whole screen, wanted to appear 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 this is to go forward and return the page, I do not know how to put the contents of the rounds ..

Where is the error here? '

       ← Rounds →

      Round 1 Data       Round 2 Data       Round 3 Data       Round 4 Data       Round 5 Data     '

    
asked by anonymous 17.07.2015 / 16:19

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><divclass="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 menu, following 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><divid="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 still create a ScrollSpy to improve.

    
17.07.2015 / 16:50
Dropdownlist Menu ASP.NET MVC 5 Error "source file not compiled"