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>