Tabs with different colors using css and jquery

Question

I need to make some tabs so that information is shown according to the tab clicked, what I do not know how to do is the colors of the tabs, they are of different colors when you click on each one, how could I do this with css and jquery?

Answer 1

You can create different styles for each tab, each with its own color.

In the example below I did this and added tabindex to use in CSS :focus, and put a jQuery listener to identify which tab was clicked from your tabindex:

The interpreter of snippet has a bug. It starts the index of :nth-child in 0, when actually it would be in 1.

$('.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>