How to create a tabs menu like Stack Overflow

Question

I would like to know how to have two links as tabs, for example:

<a href="#">Abrir Elemento 01</a>
<a href="#">Abrir Elemento 02</a> 

and by clicking on one of these links open a div with the content corresponding to each link clicked, ie:

By clicking on Abrir Elemento 01 => Open a div with the Conteúdo 01.
By clicking on Abrir Elemento 02 => Opens the Conteúdo 02.

and while that div is open, the name of this tab be highlighted, and the div opened with the content only closed if the user clicked outside the div or in Fechar Elemento.

My goal is to create a menu like the Stack Overflow notification menu.
Thanks in advance.

Answer 1

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 to 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>

---

>_Editing

To make a tabs menu like Stack Overflow, you can even do it only 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 just add also a tabindex="" to conteúdos and add a Focus to the set responsible for displaying content:

.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 would result, but it would also result in a new problem, which is to lose the title tab Focus that we have no way to manipulate it to keep ativo that is, with that gray background color when the content is clicked, then here we will have to resort to a little 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>

<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>

Answer 2

You can create with the Jquery slideToggle:

<a title="Abre o Elemento 01" class="element--01" href="javascript:void(0)">Abrir Elemento 01</a>

<a title="Abre o Elemento 02" class="element--02" href="javascript:void(0)">Abrir Elemento 02</a>


<div class="abrir--01" style="display:none">Olá Mundo!</div>
<div class="abrir--02" style="display:none">Olá Mundo!</div>

---

$(function(){
    $('.element--1').click(function(){
          $('.abrir--01').slideToggle('fast');
    });

    $('.element--2').click(function(){
          $('.abrir--02').slideToggle('fast');
    });
});