Keep tab color after clicking on it

Question

I created some tabs, when I move the mouse over each of them shows the color I sent but when I click to open the contents of the tab I would like to keep the color, showing which tab is open, instead of returning the original color, someone can give me a light?

Follow the css I’m using:

.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: Also follow the HTML and the script I’m using:

<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';
    }
}


}

Answer 1

Using Bootstrap 4 as well as other frameworks you can facilitate your work, besides of course to configure the style the way you want. Here is an example of how to leave an active tab between other options:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

You can edit the tabs however you wish:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>