Javascript 每次单击时更改 div 颜色

Question

我将如何更改多个 div 的 div 背景的颜色，但一次。 因此，如果您单击 div 1 颜色变为蓝色，单击 div 2 div1 颜色返回默认值而 div2 变为蓝色？ facebook 聊天标签如何与顶部标题一起使用

Answer 1

你可以这样做。 只需将“active”之类的类添加到单击的元素并将其从其他元素中删除

var menu = document.querySelector("#menu");

for(var i = 0; i < menu.children.length; i++){
    menu.children[i].onclick = function (event){
    document.querySelector(".active").className = "";
    event.target.className = "active";
  }
}

https://jsfiddle.net/jc61tgns/

Answer 2

我会建议你做的是以下内容：

• 创建一个 CSS 类，例如.active { background-color: blue; } .active { background-color: blue; }

• 使用 JavaScript 从 div 添加/删除.active 。

例如，在纯 JavaScript 中：

const divs = document.querySelector('#root > div');

divs.on('click', function(e) {
    // Toggle off all divs.
    divs.forEach(d => d.classList.remove('active'));

    // Toggle on clicked div.
    e.target.classList.add('active');
});

文档： classtList

干杯，纪尧姆。

Answer 3

您可以为您的div标签提供一个id并创建一个onclick事件，例如<div id="div1" onclick="changebg()">在 changebg() 内，您可以编写代码来更改背景颜色