How to make a menu that when clicking opens another div?

Question

EXAMPLE: I want to create a menu that will have four links, and each link opens a certain div with different contents in each div. type the of this site here http://www.footebol.com/ the part that has ALL / FINISHED / LIVE / NEXT.

NOTE: Sorry for anything because I’m still learning!!!

Answer 1

Here is an example that how to do, there are several ways.

$('.seccao:gt(0)').hide(); // para começar vamos esconder todas as seccoes excepto a primeira 
$('.menu-item').on('click', function() { // quando clicamos num item do menu
  $('.seccao').hide(); // escondemos todas
  var seccao = $(this).data('open'); // aqui vamos obter o id da seccao a aparecer ex: '#todos'
  $(seccao).show(); // e finalmente mostramos a seccao que tem o mesmo id do atributo data-open do item em que clicamos
});

.seccao {
 background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-item" data-open="#todos">
  TODOS
</div>
<div class="menu-item" data-open="#finalizados">
  FINALIZADOS
</div>
<div class="menu-item" data-open="#aovivo">
  AO VIVO
</div>
<div class="menu-item" data-open="#proximos">
  PROXIMOS.
</div>

<div id="master">
  <div class="seccao" id="todos">
    TODOS OS JOGOS APARECEM AQUI
  </div>
  <div class="seccao" id="finalizados">
    TODOS OS JOGOS finalizados APARECEM AQUI
  </div>
  <div class="seccao" id="aovivo">
    TODOS OS JOGOS AO VIVO APARECEM AQUI
  </div>
  <div class="seccao" id="proximos">
    TODOS OS JOGOS PROXIMOS APARECEM AQUI
  </div>
</div>

Answer 2

If you want to see the live example: http://codepen.io/leofontes/pen/aBmKzG

Here’s a Codepen with a very basic example, just so you have an idea of the way, but I recommend you understand what’s going on and try to make one yourself:

HTML

<header>
  <a href="#" id="linkUm">Menu1</a>
  <a href="#" id="linkDois">Menu2</a>
  <a href="#" id="linkTres">Menu3</a>
  <a href="#" id="linkQuatro">Menu4</a>
</header>

<div id="um"></div>
<div id="dois"></div>
<div id="tres"></div>
<div id="quatro"></div>

CSS

div {
  display: none;
  height: 200px;
  width: 200px;
}

#um {
  background-color: red;
}

#dois {
  background-color: blue;
}

#tres {
  background-color: purple;
}

#quatro {
  background-color: green;
}

Javascript

$('#linkUm').click(function() {
  $('#um').fadeIn();
});

$('#linkDois').click(function() {
  $('#dois').fadeIn();
});

$('#linkTres').click(function() {
  $('#tres').fadeIn();
});

$('#linkQuatro').click(function() {
  $('#quatro').fadeIn();
});