EXAMPLE: I want to create a menu that will have four links, and each link opens a particular div with different contents in each div. type of this site here link the part that has ALL / COMPLETED / LIVE / COMING.
OBS: Sorry for anything because I'm still learning !!!
Here is an example of how to do it, 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><divclass="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>If you'd like to see the live sample: link
Here is a Codepen with a very basic example, just so you have an idea of the way, but I recommend to understand what is happening 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();
});