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