Javascript DIV活动状态-样式更改

我已经创建了04个按钮，并为CSS中的每个按钮定义了活动状态。这些活动状态在JS中被调用，因此它会在单击时更改div样式属性，然后在单击另一个按钮时重置该属性

但这对我不起作用

---

我已经为此创建了一个

DIV标记

。请帮忙。

将您的代码从名为

onLoad

更改为名为

No wrap-in

因为函数在onLoad函数范围内，而不是全局范围内，所以它们不可读，并且在单击按钮时没有调用javascript

我没有更改任何代码，只更改了左窗格中的选项：

更新 您在逻辑上还有一个小缺陷，导致类相互交织。以下是您所做的：

单击第一个对象时，将其类设置为obj1\U active。单击第二个对象时，将obj1的类设置为obj2，并将obj2的类设置为obj2_激活

如您所见，我们正在跨越obj1和obj2类。为了解决这个问题，我们将跟踪上次单击的对象（

role

）以及单击新对象时它应该是的类（

cname

）

以下是演示：

优化 你的代码可以工作，但不是很优化。我们不应该需要四个不同的函数，它们只对不同的元素做本质上相同的事情

在这个演示中，我只需在单击时从每个元素的类名中添加和删除

\u active

：

让我们更进一步使用多个类。这对于泛化CSS声明非常有用。让我们使用默认类，仅将

活动

类附加到活动元素上，并在单击新元素时将其删除

我们还将在类名中分隔

。

，以便

btn

是它自己的类以及

任务

。这使我们能够真正清理CSS代码以提高可读性，并且当我们只需要简单的背景颜色更新或类似性质的东西时，不需要更新多个部分

以下是优化的演示：

链接颜色

---

我不确定你是否打算这样做，但你会注意到，链接有时会从白色开始，然后在单击时变为黑色。这是因为

：link

伪选择器仅选择未访问的链接。如果您想让它选择所有链接，那么只需使用

，但这并不能解决问题。每个按钮的活动颜色是不同的，单击一次后，它没有使用正确的DIV活动状态。啊，我没有注意到这种行为。我添加了一整节来描述如何解决这个问题以及进一步优化代码。希望对您有所帮助！非常感谢你。你解决了我的问题，也解释了改进代码的可能方法。非常好：）JS不能与IE8正常工作。你能帮我解决这个问题吗？你能解释一下发生了什么事吗？在我的电脑上，它似乎在IE7+中工作。JSFIDLE通常不适用于任何小于9的IE浏览器。我将
show
附加到URL以在IE中查看它，如下所示：