A sua pergunta está um pouco vaga e difícil de entender o que realmente você está tentando fazer, para que possa dar uma resposta concreta e adaptar o código da melhor forma.
No entanto vou postar aqui um conceito de como podes alcançar o pretendido e depois então podes fazer às alterações necessárias para as suas necessidades.
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>
>_Edição
Para fazer um menu de tabs como o do Stack Overflow, até podes fazê-lo apenas com CSS da seguinte maneira:
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>
Conteúdo desaparece quando o mesmo é clicado
Para resolver esse problema poderíamos apenas adicionar também um tabindex=""
aos conteúdos
e agregar um focus ao conjunto responsabilizado por mostrar o conteúdo:
.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;
}
Isto resultava, mas também iria resultar em um novo problema, que é perder o focus da tab com título que não temos como manipular isso para ele se manter ativo
ou seja, com aquela cor de background cinzenta quando o conteúdo é clicado, então aqui teremos de recorrer a um pouco de Javascript, neste caso jQuery da seguinte forma:
$(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>
<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" 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>