Как изменить цвет фона вкладки при выделении с помощью javascript?

Question

Хотя вопрос действительно распространенный, я действительно не мог найти однозначного ответа. У меня есть две вкладки «Tab1» и «Tab2». Я хочу, чтобы цвет активной вкладки менялся, когда пользователь нажимал на нее. Есть ли способ, которым я могу сделать это чисто 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

Это не очень сложно сделать. Это можно сделать очень просто:

1. Создать стиль активного класса для вкладок
2. Затем добавить события onClick на кнопку (вы также можете сделать это с помощью addEventListener
3. Когда вкладка нажата, удалите активный класс из активной вкладки и добавьте его на выбранную вкладку

Пример -

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 2

С кодом, который вы дали, я добавил только одно свойство css, чтобы иметь класс active и background-color для активного типа green ..,

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

. JS частичное включение,

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));

Я полагаю, что у вас есть только эти две кнопки и вам нужно изменить цвет фона в зависимости от выбора,

Получить эти кнопки с помощью getElementById() и сделать addEventListener() для каждой кнопки отдельно и иметь общую функцию changeBackground(), в которой есть код, который изменяет активный класс между переключениями вкладок.

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 3

Вы можете использовать это не обязательно, вам нужно использовать js из того, что я понял из вашего вопроса, это может быть решение, которое вы ищете

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

Это в основном Css селектор фокусировки

Итак, вы делаете элемент: фокус, тогда вы можете изменить цвет