使用 vanilla js 将活动元素背景设置为红色并将剩余元素设置为白色背景

Question

我有一个简单的部分，默认包含五个元素，第一个元素背景是红色（活动元素）现在我希望当您单击任何剩余元素以将背景颜色更改为红色，其余元素为白色使用 vanilla js 的背景颜色。

问题：当我点击任何剩余元素设置为红色但前一个活动元素仍然是红色; live demo

我的解决方案

HTML

<div id="panels">
  <div class="panel active">First</div>
  <div class="panel">second</div> 
  <div class="panel">third</div>  
  <div class="panel">fouth</div>  
  <div class="panel">Fith</div>
</div>

CSS

#面板{ 显示：弯曲； 证明：空间之间； 对齐项目：中心 }

.panel{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100px;
    height: 100px;
    background: white;
    color: black;
    font-size: 24px;
    text-align: center;
    margin: 0px auto;
    cursor: pointer;
}
.active{
  background: red;
}

Js

 var panel = document.getElementById('panels'); // Parent

        panel.addEventListener('click', function (e) {
            var target = e.target; // Clicked element
            while (target && target.parentNode !== panel) {
                target = target.parentNode; // If the clicked element isn't a direct child
                if (!target) { return; } // If element doesn't exist
            }
            if (target.tagName === 'DIV') {
                target.classList.toggle('active');

            } else {
                console.log('love')

            }
        });

我需要在此处进行哪些更改才能使其正常工作？

Answer 1

现代（IE 不支持）面板。
所有浏览器都支持 Vanilla JavaScript。

自定义元素<div-panels>处理点击事件

customElements.define("div-panels", class extends HTMLElement{
  connectedCallback(){
    this.onclick = (evt) => {
      this.querySelector("[selected]")?.removeAttribute("selected");
      evt.target.setAttribute("selected","selected");
    }
  }
});

div-panels > div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: pink;
}
div-panels > div[selected] {
  background: green;
}

<div-panels>
  <div>First</div>
  <div>Second</div> 
  <div selected>Third</div>  
  <div>Fourth</div>  
  <div>Fith</div>
</div-panels>

Answer 2

const Elements = document.querySelectorAll(".panel");

Elements.forEach((el) => {
  el.onclick = () => {
    if (el.classList.contains("active")) {
      // if you want to remove the red
      el.classList.remove("active");
    } else {
      let CurrentActive = document.querySelector(".active");
      CurrentActive ?CurrentActive.classList.remove("active") :""
      el.classList.add("active");
    }
  };
});

.panel{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100px;
    height: 100px;
    background: white;
    color: black;
    font-size: 24px;
    text-align: center;
    margin: 0px auto;
    cursor: pointer;
}
.active{
  background: red;
}

<div id="panels">
  <div class="panel active">First</div>
  <div class="panel">second</div> 
  <div class="panel">third</div>  
  <div class="panel">fouth</div>  
  <div class="panel">Fith</div>
</div>

Answer 3

仅出于娱乐和教育目的，这里有一个没有 JavaScript 的解决方案。只是隐藏了 HTML 单选按钮和一个 CSS 技巧。

#panels {
  display: flex;
  justify: space-between;
  align-items: center
}

.panel {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background: white;
  color: black;
  font-size: 24px;
  text-align: center;
  margin: 0px auto;
  cursor: pointer;
}

[type=radio]:checked + .panel {
  background: red;
}

[type=radio] {
  display: none;
}

<div id="panels">
  <input type="radio" name="panel" id="panel1" checked />
  <label class="panel" for="panel1">First</label>

  <input type="radio" name="panel" id="panel2" />
  <label class="panel" for="panel2">second</label>

  <input type="radio" name="panel" id="panel3" />
  <label class="panel" for="panel3">third</label>

  <input type="radio" name="panel" id="panel4" />
  <label class="panel" for="panel4">fouth</label>

  <input type="radio" name="panel" id="panel5" />
  <label class="panel" for="panel5">Fith</label>
</div>

Answer 4

var panels = document.querySelectorAll("#panels > .panel")
panels.forEach(each=>{
    each.onclick = function(){
        panels.forEach(ss=>ss.classList.remove("active")) // removing active from all
        each.classList.add("active") // assigning active to selected
    }
})

.panel{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100px;
    height: 100px;
    background: white;
    color: black;
    font-size: 24px;
    text-align: center;
    margin: 0px auto;
    cursor: pointer;
}
.active{
  background: red;
}

<div id="panels">
  <div class="panel active">First</div>
  <div class="panel">second</div> 
  <div class="panel">third</div>  
  <div class="panel">fouth</div>  
  <div class="panel">Fith</div>
</div>