Skip to main content
4 de 6
adicionou 3332 caracteres ao conteúdo
Chun
  • 7,5mil
  • 4
  • 32
  • 57

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 () {
        $('.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 {
    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>

Chun
  • 7,5mil
  • 4
  • 32
  • 57