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

Question

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>

Answer 1

With the code you have given, I have added only one css property to have class active and a background-color to the active as green ..,

.active {
  background-color: green !important;
}

The JS part inclusion,

const tab1btn = document.getElementById('tab1btn');
const tab2btn = document.getElementById('tab2btn');

function changeBackground(event){
  const active = document.querySelector('.active');
  if(active){
    active.classList.remove('active')
  }
  event.target.className = "active";
}


tab1btn.addEventListener('click', changeBackground.bind(this));
tab2btn.addEventListener('click', changeBackground.bind(this));

I believe you have only these two button and need to change the background color based on the selection,

Get those buttons using, getElementById() and make addEventListener() to each button separately and have a common function changeBackground() which has the code that changes the active class between switching of tabs..

const tab1btn = document.getElementById('tab1btn');
const tab2btn = document.getElementById('tab2btn');

function changeBackground(event){
  const active = document.querySelector('.active');
  if(active){
    active.classList.remove('active')
  }
  event.target.className = "active";
}


tab1btn.addEventListener('click', changeBackground.bind(this));
tab2btn.addEventListener('click', changeBackground.bind(this));

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

.active {
  background-color: green !important;
}

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

Answer 2

It isn't very tricky to do. You can do it in very simple steps:

1. Create an active class style for tabs
2. Then add onClick events on your button (you can also do it using addEventListener
3. When tab is clicked, remove active class from active tab, and add it to the clicked tab

Example -

JS:

function selectTab (e) {
  e.preventDefault();

  // select current active tab and remove active class (if-any)
  let activeTab = document.querySelector('.tab > .active');
  if (activeTab) activeTab.classList.remove('active');

  e.target.element.classList.add('active');
}

HTML:

<div class="tab">
  <button id="tab1btn" value="Chasis_1" onClick(e => selectTab(e))>
    Chasis 1
  </button>
  <button id="tab2btn" value="Chasis_2" onClick(e => selectTab(e))>
    Chasis 2
  </button>  
</div>

CSS:

.tab > button.active {
  background-color: #cecece;
}

Answer 3

You can use this not necessarily you need to use js from what I understood from your question this might be solution you are looking for

https://www.w3schools.com/cssref/sel_focus.asp

It is basically the Css selector focus

So you do element:focus then you can change the color