Criei algumas abas, quando eu passo o mouse por cima de cada uma delas mostra a cor que eu mandei mas quando eu clico para abrir o conteudo da aba eu gostaria que mantivesse a cor, mostrando qual aba está aberta, em vez de voltar a cor original, alguem pode me dar uma luz?
Segue o css que eu estou usando:
.tab {
overflow: hidden;
border: 1px solid #C25C40;
background-color: #262626;
border-radius:5px;
position:absolute;
top:160px;
left:360px;
z-index:110;
}
.tab button {
background-color: #262626;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 5px 10px;
transition: 0.3s;
color: white;
font: 600 13px Lato, sans-serif;
opacity:0.9;
z-index:110;
}
.tab button:hover {
background-color: #C25C40;
transition:.3s;
}
.tab button.active {
background-color: #C25C40;
}
.tabcontent {
display: none;
height: 670px;
width: 605px;
border: 1px solid #C25C40;
border-top: none;
color:white;
background-color:#262626;
border-radius:5px;
position:absolute;
top:189px;
left:438px;
z-index:110;
}
EDIT: Segue também o HTML e o script que eu estou usando:
<div class="tab">
<button id="aba" class="tablinks" onclick="openTab('aba1')">Contatos</button>
<button class="tablinks" onclick="openTab('aba2')">Contas</button>
<button class="tablinks" onclick="openTab('aba3')">Representante</button>
<button class="tablinks" onclick="openTab('aba4')">Grupos de Produto</button>
<button class="tablinks" onclick="openTab('aba5')">Reclamações</button>
<button class="tablinks" onclick="openTab('aba6')">Multi-Empresa</button>
<button class="tablinks" onclick="openTab('aba7')">Produtos</button>
<button class="tablinks" onclick="openTab('aba8')">Qualidade</button>
</div>
function openTab(aba) {
var theArray= new Array('aba1', 'aba2', 'aba3', 'aba4', 'aba5', 'aba6', 'aba7', 'aba8');
for(i=0; i<theArray.length; i++){
if(theArray[i] == aba){
if (document.getElementById(aba).style.display=='none')
document.getElementById(aba).style.display='block';
else
document.getElementById(theArray[i]).style.display='none';
}else{
document.getElementById(theArray[i]).style.display='none';
}
}
}
HTML
?