I need to make clicking on the menu item, a div linked to this item appears on the screen, if I click on another menu item, the previous div disappears and the new div appears ... in the photo below the get an idea of what I need: 
When I click on GOLEIROS for example, the div that contains the images of DEFENSE disappears and the div will appear with the images of the goalkeepers.
I saw that you put the jQuery tag, but this result is very similar using only CSS:
#time { width: 100%; height: 150px;
overflow: hidden; text-align: center;
background-color: #005500; }
.jogadores { width: 100%; height: 150px; }
.jogadores h3{ color: #FFF; }
#menu { width: 100%; text-align: center;
background-color: #004500; }
#menu ul{ margin: 0; }
#menu li { display: inline-block; padding: 10px; }
#menu a { text-decoration: none; color: #FFF; }<div id="time">
<div id="goleiros" class="jogadores"><h3>Goleiros</h3></div>
<div id="defesa" class="jogadores"><h3>Defesa</h3></div>
<div id="laterais" class="jogadores"><h3>Laterais</h3></div>
</div>
<div id="menu">
<ul>
<li><a href="#goleiros">Goleiros</a></li>
<li><a href="#defesa">Defesa</a></li>
<li><a href="#laterais">Laterais</a></li>
</ul>
</div>The idea in this code was to put
divof the players with the same size of thedivthey are in,overflow: hiddenis for that displaysdivat a time and only displays the otherdivwhen click on the menu link that points toidof each.
The rest is with you.
From what I understand the code below can solve your problem, of course you should change a few things, but the essence is this. Hope this helps. HTML
<button onclick="showataque()">Ataque</button>
<div id="ataque">
<h1>ATAQUE</h1>
</div>
<button onclick="showdefesa()">Defesa</button>
<div id="defesa">
<h1>DEFESA</h1>
</div>
CSS
#ataque {
display: none;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
#defesa {
display: none;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
JavaScript
function showataque() {
var x = document.getElementById('ataque');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function showdefesa() {
var y = document.getElementById('defesa');
if (y.style.display === 'none') {
y.style.display = 'block';
} else {
y.style.display = 'none';
}
}
Look at this example, I think it's more or less what you want!
function mostraDiv(caller) {
if (caller.id === 'goleiros') {
$("#divGoleiros").attr("style", "display: block");
$("#divDefesa").attr("style", "display: none");
$("#divLaterais").attr("style", "display: none");
$("#divVolantes").attr("style", "display: none");
} else if (caller.id === 'defesa') {
$("#divGoleiros").attr("style", "display: none");
$("#divDefesa").attr("style", "display: block");
$("#divLaterais").attr("style", "display: none");
$("#divVolantes").attr("style", "display: none");
} else if (caller.id === 'laterais') {
$("#divGoleiros").attr("style", "display: none");
$("#divDefesa").attr("style", "display: none");
$("#divLaterais").attr("style", "display: block");
$("#divVolantes").attr("style", "display: none");
} else if (caller.id === 'volantes') {
$("#divGoleiros").attr("style", "display: none");
$("#divDefesa").attr("style", "display: none");
$("#divLaterais").attr("style", "display: none");
$("#divVolantes").attr("style", "display: block");
}
}img {
height: 240px;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
a {cursor: pointer;}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.show {display:block;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="navbar">
<a id="goleiros" onclick="mostraDiv(this)">GOLEIROS</a>
<a id="defesa" onclick="mostraDiv(this)">DEFESA</a>
<a id="laterais" onclick="mostraDiv(this)">LATERAIS</a>
<a id="volantes" onclick="mostraDiv(this)">VOLANTES</a>
</div>
<div id="divGoleiros" style="display: none; background-color: red; height: 100%; width: 100%;">
<center>
<img src="https://choquereimajestoso.files.wordpress.com/2012/11/goleiro-bruno-palmeiras.jpg"height='auto'><!--https://camisa23.files.wordpress.com/2014/06/gj.jpg--></center></div><divid="divDefesa" style="display: none; background-color: red; height: 100%; width: 100%;">
<center>
<img src="https://i.stack.imgur.com/9GQFd.jpg"></center></div><divid="divLaterais" style="display: none; background-color: red; height: 100%; width: 100%;">
<center>
<img src="http://jconlineimagem.ne10.uol.com.br/imagem/noticia/2017/06/11/normal/46212346eebee6919fd2fb41c521a744.jpg"></center></div><divid="divVolantes" style="display: none; background-color: red; height: 100%; width: 100%;">
<center>
<img src="http://torcedores.uol.com.br/content/uploads/2015/06/palmeiras-adidas-599x400.jpg"></center></div>Iputtheimagethatyouprovided(withoutediting)justsoyouhaveasenseofhowitwouldlook.
References: