How can i Change tab background color on selection using javascript?

Although the question is really common I really couldn't quite find a definite answer. I have two tabs 'Tab1' and 'Tab2' I want the color of the active tab to change when the user clicks on it. Is there any way I can do it by pure js?

CSS

#tab1:hover, #tab2:hover, #tab3:hover {
  background: teal;
}

#tab1Content, #tab2Content, #tab3Content {
  width: 500px;
  height: 100px;
  padding: 20px;
  border: 1px solid #B00098;
  border-radius: 10px;
}

.tab button{
      color:#1e84d8;
    /*margin-bottom: 0 px;*/
    background-color: #e7f6ff;
    float: left;
    cursor: pointer;
    transition: 0.1s;
    width:50%;
    border-top: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
    border-right: none;
    border-bottom: 1px solid #20a3eb;
}
      #tab1btn{
                border: 1px solid rgb(19, 18, 18);
                padding: 20px;
                overflow: hidden;
                color: rgb(16, 8, 32);
                font-size: 25px;
                font-style: initial;
                font-family: 'Times New Roman', Times, serif; 
            }

      #tab2btn{
                border: 1px solid rgb(19, 18, 18);
                padding: 20px;
                overflow: hidden;
                color: rgb(16, 8, 32);
                font-size: 25px;
                font-style: initial;
                font-family: 'Times New Roman', Times, serif; 
            }

HTML

<div class="tab">
  <button  id= "tab1btn"  value="Chasis_1">Chasis 1</button>
  <button  id= "tab2btn" value="Chasis_2">Chasis 2</button>  
</div>