如何使用JavaScript更改多个元素的CSS

我试图使用JavaScript在被选中后更改元素的背景色，并确保一次只有一个元素具有特定的背景色。一旦用户选择了一个不同的元素，我想用一个不同的背景色替换之前选择的元素。目前，我只能通过选择每个元素来切换单个元素。我需要能够选择一个元素并应用新的背景色，然后让JavaScript将以前活动元素的背景色更改为不同的颜色，只需单击一次

我试图做的是非常类似于现代导航栏或列表项，其中一次只有一个元素处于“活动”状态，并且具有与同一div、row等中的其他元素不同的背景色

关于我的工作，我正在使用bootstrap，不想在这个特定的项目中使用jQuery

CSS:

这里可以看到一个例子：

---

如果需要澄清，请告诉我。

是的，非常简单

假设

您没有尝试支持IE8，因为您使用的是类列表 您可以将元素作为变量包含，而不是重复查询DOM。 范例

代码

我重写了您的JavaScript，使其更干净，并使其变干：

var techs = [].slice.call(document.querySelectorAll('#pTwoRowOne h4'));

function set_active(event) {
  techs.forEach(function(tech){
    if (event.target == tech) { return; }
    tech.classList.remove('active');
  });
  event.target.classList.toggle('active');
}

techs.forEach(function(item) {
  item.addEventListener('click', set_active);
});

一些解释

[].slice.calldocument.queryselectoral'pTwoRowOne h4'；-我们使用它将输出从节点列表更改为数组。这允许我们以后使用forEach。querySelectorAll返回包含与CSS选择器匹配的所有元素的节点列表。根据您的环境，您可能可以使用更好的CSS选择器来替换它

addEventListener是一种比通过onclick+=迭代添加绑定事件侦听器更好的方法。据我所知，在ECMA5及更高版本中，这也是推荐的方法

通过将元素查询设置为变量，您将能够在内存中保留引用，而不是每次都轮询DOM来更改元素。这将使您的JavaScript稍微快一点，而且它还是它生成的代码的一个更好、更干净的版本

更新

---

我重新编写了JS以使其更有意义。

假设您只有一个活动元素，您可以使用document.querySelector找到它-如果您可以有多个元素，您可以使用document.querySelector all并对其进行迭代

简单案例：

功能激活事件{ var active=document.querySelector.active'； //激活已单击的元素，即使它已处于活动状态 添加'active'； //停用以前活动的元素，即使它是单击的元素=>切换 如果处于活动状态，则将.classList.remove'active'删除； } document.getElementByIdtechBio.AddEventListener单击，激活； document.getElementByIdtechCart.AddEventListener单击，激活； document.getElementByIdtechChem.AddEventListener单击，激活； h4{ 边框：1px纯黑； 边界半径：8px； 填充：10px 2px 10px 2px； 利润率：20px 20px 0px 20px； 背景色：F0； 边框颜色：F8； 颜色：505050； 光标：指针； } .主动{ 背景色：99E6FF； } 生物学 制图学 化学

---

您可以这样做：

[].slice.call(document.querySelectorAll(".test")).forEach(function(element) {
  element.addEventListener('click', function(event) {
    if (activeElement = document.querySelector(".test.active")) {
      activeElement.classList.remove("active");
    };
    event.target.classList.add('active');
  });
});

基本上，首先从活动元素中删除活动类，然后将其添加到目标中

---

另一种类似但更简单的方法：

---

我更喜欢你的JavaScript很高兴有选择和解释好吧，至少现在有了。谢谢你的灵感。注意，类列表可以是IE8的。这些答案都很好，所以谢谢你@Josh和其他人。我唯一剩下的问题是，由于我不是JS专家，使用这里提到的任何一种方法与另一种方法相比，有哪些优点或缺点。这是一个相当开放的问题，特别是在不了解我的项目的情况下，请尽量简短彻底。@Hambone Array.forEach.call是在ES5 ECMAScript 5中引入的，因此对于较旧的浏览器，它可能需要多边形填充。如果没有多边形填充，您只需使用标准forvar i=0循环所有元素；我

document.getElementById("techBio").onclick=function() {
    document.getElementById("techBio").classList.toggle('active');
}

document.getElementById("techCart").onclick=function() {
    document.getElementById("techCart").classList.toggle('active');
}

document.getElementById("techChem").onclick=function() {
    document.getElementById("techChem").classList.toggle('active');
}

var techs = [].slice.call(document.querySelectorAll('#pTwoRowOne h4'));

function set_active(event) {
  techs.forEach(function(tech){
    if (event.target == tech) { return; }
    tech.classList.remove('active');
  });
  event.target.classList.toggle('active');
}

techs.forEach(function(item) {
  item.addEventListener('click', set_active);
});

[].slice.call(document.querySelectorAll(".test")).forEach(function(element) {
  element.addEventListener('click', function(event) {
    if (activeElement = document.querySelector(".test.active")) {
      activeElement.classList.remove("active");
    };
    event.target.classList.add('active');
  });
});

var H4 = document.getElementsByClassName("test"), act;

[].forEach.call(H4, function(el){
    el.addEventListener("click", function(){
       if(act) act.classList.remove("active");
       return (this.classList.toggle("active"), act=this);
    });
});