1

Gostaria de saber como posso fazer para ter dois links como abas, por exemplo:

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

e ao clicar em um desses links abrir uma div com o conteúdo correspondente a cada link clicado, ou seja:

Ao clicar em Abrir Elemento 01 => Abre uma div com o Conteúdo 01.
Ao clicar em Abrir Elemento 02 => Abre o Conteúdo 02.

e enquanto essa div estiver aberta, o nome dessa tab fique realçado, e a div aberta com o conteúdo só fechasse se o usuário clicasse fora da div ou em Fechar Elemento.

O meu objetivo é criar um menu como o menu de notificações do Stack Overflow.
Obrigado desde já.

2
  • O que você quer se chama diálogo modal. Tem várias bibliotecas pra isso. 7/10/2017 às 3:17
  • Poderia dar um exemplo?
    – goio
    7/10/2017 às 4:04

2 Respostas 2

2

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>

8
  • Pra deixar mais claro, é um menu parecido com a "notificações" do stackoverflow
    – goio
    7/10/2017 às 12:43
  • Explicado dessa maneira seria bem mais fácil de entender aquilo que estavas a tentar alcançar @mayron2017 xD
    – Chun
    7/10/2017 às 14:17
  • Cʜᴜɴ amigo encontrei um problema, ao clicar dentro do conteudo- um conteudo- dois conteudo- tres ele fecha a div, e o objetivo é so fechar se for clicado fora da div ou no menu
    – goio
    8/10/2017 às 0:01
  • Fiz uma nova edição @mayron2017
    – Chun
    8/10/2017 às 2:06
  • Só tem um outro problema amigo, a div não fecha ao clicar no menu, só fecha ao clicar fora, mais vou testar no meu sistema
    – goio
    8/10/2017 às 2:09
1

Podes criar com o slideToggle do JQuery:

<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');
    });
});
3
  • Não funcionou amigo
    – goio
    7/10/2017 às 3:49
  • Em seu site ja tem o JQuery instalado? 7/10/2017 às 3:50
  • Sim pego direto da biblioteca
    – goio
    7/10/2017 às 3:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .