Skip to main content
Commonmark migration
Fonte Link

##Conteúdo desaparece quando o mesmo é clicado

Conteúdo desaparece quando o mesmo é clicado

##Conteúdo desaparece quando o mesmo é clicado

Conteúdo desaparece quando o mesmo é clicado

adicionou 220 caracteres ao conteúdo
Fonte Link
Chun
  • 7,5mil
  • 4
  • 32
  • 57
$(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>
$(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>
$(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>
adicionou 3332 caracteres ao conteúdo
Fonte Link
Chun
  • 7,5mil
  • 4
  • 32
  • 57
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;
}
 
.navegacao span:hover,
.navegacao span:active,
.navegacao span:focustab-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 display:Tab block;
}*/
.nav-dois:focus ~ .conteudo .conteudo-dois,
.nav-dois:active ~ .conteudo .conteudo-dois {,
 .conteudo-dois:focus, .conteudo-dois:active,

/* Terceira display:Tabe block;
}*/
.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="1">Y<tabindex="2">Y</span>
    <span class="nav-tres" tabindex="1">Z<tabindex="3">Z</span>
    <div class="conteudo">
        <div class="conteudo-um same">Conteúdosame" tabindex="1">Conteúdo do elemento UM</div>
        <div class="conteudo-dois same">Conteúdosame" tabindex="2">Conteúdo do elemento DOIS</div>
        <div class="conteudo-tres same">Conteúdosame" tabindex="3">Conteúdo do elemento TRÊS</div>
    </div>
</div>
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="1">Y</span>
    <span class="nav-tres" tabindex="1">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>
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>
adicionou 1750 caracteres ao conteúdo
Fonte Link
Chun
  • 7,5mil
  • 4
  • 32
  • 57
Carregando
adicionou 1750 caracteres ao conteúdo
Fonte Link
Chun
  • 7,5mil
  • 4
  • 32
  • 57
Carregando
Fonte Link
Chun
  • 7,5mil
  • 4
  • 32
  • 57
Carregando