Your question is a little vague and difficult to understand what you are really trying to do, so you can give a concrete answer and adapt the code in the best way.
However, I will post here a concept of how you can achieve what you want and then you can make the necessary changes for your needs.
var x = document.querySelectorAll('.elemnto-link');
var resultado = document.getElementById('resultado');
// cria loop para todos os elementos com a class "elemento-link"
for (var i=0; i<x.length; i++ ){
link = x[i];
// Adiciona evento click
link.addEventListener('click', function(evento) {
// Verifica o id do elemento clicado
if (evento.target.id == 'el-um'){
// Se o id coincidir com o primeiro link "el-um", adiciona este texto no "resultado"
resultado.innerHTML = '<span class="conteudo-resultado">Conteúdo do elemento UM</span>';
} else if (evento.target.id == 'el-dois') {
// Se o id coincidir com o segundo link "el-dois", adiciona este texto
resultado.innerHTML = '<span class="conteudo-resultado">Conteúdo do elemento DOIS</span>';
} else if (evento.target.id == 'fechar') {
// Se coincidir com o elemento "fechar", elimina o texto dentro do resultado
resultado.innerHTML = '';
}
});
}
.elemnto-link {
cursor: pointer;
margin-right: 30px;
}
.conteudo-resultado {
display: block;
background-color: royalblue;
color: #fff;
margin-top: 15px;
padding: 35px;
text-align: center;
}
<span id="el-um" class="elemnto-link">Abrir Elemento 01</span>
<span id="el-dois" class="elemnto-link">Abrir Elemento 02</span>
<span id="fechar" class="elemnto-link">fechar</span>
<div id="resultado"></div>
> _Edit
To make a tab menu like Stack Overflow, you can even do it with CSS as follows:
body {
margin: 0;
padding: 0;
background-color: #fff;
}
.navegacao {
background-color: #fff;
border-bottom: 1px solid #eee;
}
.navegacao span {
display: inline-block;
padding: 16px;
outline: 0;
cursor: pointer;
}
.navegacao span:hover,
.navegacao span:active,
.navegacao span:focus {
background-color: #eee;
}
.nav-um:focus ~ .conteudo .conteudo-um,
.nav-um:active ~ .conteudo .conteudo-um {
display: block;
}
.nav-dois:focus ~ .conteudo .conteudo-dois,
.nav-dois:active ~ .conteudo .conteudo-dois {
display: block;
}
.nav-tres:focus ~ .conteudo .conteudo-tres,
.nav-tres:active ~ .conteudo .conteudo-tres {
display: block;
}
.conteudo {
position: absolute;
top: 50px;
}
.same {
display:none;
background-color: #eee;
padding: 10px;
}
<div class="navegacao">
<span class="nav-um" tabindex="1">X</span>
<span class="nav-dois" tabindex="2">Y</span>
<span class="nav-tres" tabindex="3">Z</span>
<div class="conteudo">
<div class="conteudo-um same">Conteúdo do elemento UM</div>
<div class="conteudo-dois same">Conteúdo do elemento DOIS</div>
<div class="conteudo-tres same">Conteúdo do elemento TRÊS</div>
</div>
</div>
Content disappears when it is clicked
To solve this problem we could only add a tabindex="" to conteúdos and add a focus to the set responsible for displaying the contents:
.nav-um:focus ~ .conteudo .conteudo-um,
.nav-um:active ~ .conteudo .conteudo-um,
.conteudo-um:focus, .conteudo-um:active /* Novo focus para o conteúdo */
{
display: block;
}
This resulted, but would also result in a new problem, which is to lose the focus of the tab with title that we have no way to handle it so it stays ativo ie with that gray background color when the content is clicked, so here we will have to resort to a bit of Javascript, in this case jQuery as follows:
$(document).ready(function() {
$('.navegacao span').on('click', function () {
if ($(this).hasClass('tab-ativada')) {
$('.navegacao span').removeClass('tab-ativada');
$('.same').focus();
} else {
$('.navegacao span').removeClass('tab-ativada');
$(this).addClass('tab-ativada');
}
});
$(document).on('click', function(e) {
if (!$(e.target).is('.navegacao span, .same')) {
$('.navegacao span').removeClass('tab-ativada');
}
});
});
body {
margin: 0;
padding: 0;
background-color: #fff;
}
.navegacao {
background-color: #fff;
border-bottom: 1px solid #eee;
}
.navegacao span {
display: inline-block;
padding: 16px;
outline: 0;
cursor: pointer;
}
.tab-ativada, .navegacao span:hover {
background-color: #eee;
}
/* Isto poderia ser dividido em três blocos de código como estava anteriormente, mas já que o estilo a ser aplicado é igual para todos decidi juntar tudo num só bloco. Adapta-o à tua maneira */
/* Primeira Tab */
.nav-um:focus ~ .conteudo .conteudo-um,
.nav-um:active ~ .conteudo .conteudo-um,
.conteudo-um:focus, .conteudo-um:active,
/* Segunda Tab */
.nav-dois:focus ~ .conteudo .conteudo-dois,
.nav-dois:active ~ .conteudo .conteudo-dois,
.conteudo-dois:focus, .conteudo-dois:active,
/* Terceira Tabe */
.nav-tres:focus ~ .conteudo .conteudo-tres,
.nav-tres:active ~ .conteudo .conteudo-tres,
.conteudo-tres:focus, .conteudo-tres:active {
display: block;
}
.conteudo {
position: absolute;
top: 50px;
}
.same {
display:none;
background-color: #eee;
padding: 10px;
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><divclass="navegacao">
<span class="nav-um" tabindex="1">X</span>
<span class="nav-dois" tabindex="2">Y</span>
<span class="nav-tres" tabindex="3">Z</span>
<div class="conteudo">
<div class="conteudo-um same" tabindex="1">Conteúdo do elemento UM</div>
<div class="conteudo-dois same" tabindex="2">Conteúdo do elemento DOIS</div>
<div class="conteudo-tres same" tabindex="3">Conteúdo do elemento TRÊS</div>
</div>
</div>
