如何使用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

你可以使用这个不一定你需要使用我从你的问题中理解的js 这可能是你正在寻找的解决方案

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

它基本上是 CSS 选择器的焦点

所以你做 element:focus 然后你可以改变颜色

Answer 2

这不是很棘手。 您可以通过非常简单的步骤来完成：

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 3

使用您提供的代码，我只添加了一个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>