Preciso fazer algumas abas para que seja mostradas informações de acordo com a aba cliclada, o que não sei como fazer é as cores das abas, elas são de cores diferentes quando clica em cada uma, como eu poderia fazer isso com css e jquery?
1 Resposta
Você pode criar estilos diferentes para cada aba, cada uma com a sua cor.
No exemplo abaixo fiz isso e adicionei tabindex
para pode usar no CSS :focus
, e coloquei um escutador jQuery para identificar qual aba foi clicada à partir do seu tabindex
:
O interpretador do snippet tem um bug. Ele inicia o index do
:nth-child
em0
, quando na verdade seria em1
.
$('.abas').on('click', function(){
alert('Aba '+ $(this).attr('tabindex') +' clicada!');
});
.abas{
display: block;
width: 50px;
height: 40px;
line-height: 40px;
text-align: center;
border-bottom: 3px solid #ddd;
float: left;
cursor: pointer;
outline: none;
}
.abas:hover,
.abas:focus{
color: #fff;
}
.abas:nth-child(1){
border-bottom-color: orange;
}
.abas:nth-child(1):hover,
.abas:nth-child(1):focus{
background: orange;
}
.abas:nth-child(2){
border-bottom-color: red;
}
.abas:nth-child(2):hover,
.abas:nth-child(2):focus{
background: red;
}
.abas:nth-child(3){
border-bottom-color: purple;
}
.abas:nth-child(3):hover,
.abas:nth-child(3):focus{
background: purple;
}
.abas:nth-child(4){
border-bottom-color: blue;
}
.abas:nth-child(4):hover,
.abas:nth-child(4):focus{
background: blue;
}
.abas:nth-child(5){
border-bottom-color: green;
}
.abas:nth-child(5):hover,
.abas:nth-child(5):focus{
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abas" tabindex="1">
Aba 1
</div>
<div class="abas" tabindex="2">
Aba 2
</div>
<div class="abas" tabindex="3">
Aba 3
</div>
<div class="abas" tabindex="4">
Aba 4
</div>
<div class="abas" tabindex="5">
Aba 5
</div>
-
para clicar na aba aparecer uma informação embaixo de cada uma, como eu faria? 28/11/2017 às 19:15
-
-
como eu faço para colocar textos diferentes para cada aba? jsfiddle.net/x9rtxsv5 29/11/2017 às 15:43
-
-
1