使用javascript更改背景颜色会影响CSS'；s:悬停

我有一组6个div，当我点击每个div时，某个

div

会改变它的

innerHTML

，就像某种菜单一样。当用户将鼠标悬停在这些“按钮”（实际上是div）上时，它们会用CSS的属性hover突出显示。当用户单击“按钮”时，还有一个

：active

---

由于“信息”div在单击时会发生变化，因此我希望当前选定的div不断高亮显示，颜色与悬停时完全不同。所以我用javascript来实现这个。我调用一个函数来更改所有“按钮”的背景色（这样我就不必“记住”单击了哪个按钮），然后将

this

div的

backgroundColor

更改为适当的颜色

但是，现在我丢失了我的

：hover

和

：active

样式。如何处理

以下是请求的代码片段：

function ofarbajSveU999() {
document.getElementById("menubutton1").style.backgroundColor = "#999";
...
document.getElementById("menubutton6").style.backgroundColor = "#999";
}

function showMeaning() {
document.getElementById("information").innerHTML = meaning;
ofarbajSveU999();
document.getElementById("menubutton1").style.backgroundColor = "#ccc";
}

意思是

是一个字符串，

菜单按钮x

是6个类似按钮的div

#kotd .menubutton {
float: left;
background-color: #999;
width: 120px;
padding: 2px 0px;
cursor: pointer;
}

#kotd .menubutton:hover {
background-color: #aaa;
}

#kotd .menubutton:active {
background-color: #bbb;
}

---

不要使用javascript更改颜色，而是使用javascript向活动的“按钮”添加和删除类（例如

.current

），然后在CSS中相应地设置

.current

类的样式。使用

addClass（）

、

removeClass（）

或

toggleClass（）

函数，jQuery将是实现这一点的最优雅的解决方案

为了进一步解释这个想法： 单击按钮时，将类添加到其类属性中，而不是添加内联样式属性。这允许通过CSS样式表对它们进行样式设置

在jQuery中，这非常简单。您可以这样做：

$(".menubutton").click(function () {
    $(".menubutton").removeClass("current");
    $(this).addClass("current");
});

<div class="menubutton current">

逐步： 首先通过调用

$（“.menubutton”）

来查找类为

menubutton

的所有DOM元素。然后使用

.click（）

如果单击了

菜单按钮中的一个元素，则会触发一个事件。
function（）{}
包含单击时执行的函数。首先

$(".menubutton").removeClass("current");

再次使用class
menubutton
获取所有对象，并从任何具有该类的对象中删除该类
current
。第二

$(this).addClass("current");

添加类
current
ti“this”。。。表示单击的对象

这将使DOM中单击的对象看起来像这样：

$(".menubutton").click(function () {
    $(".menubutton").removeClass("current");
    $(this).addClass("current");
});

<div class="menubutton current">

在纯JavaScript中，这将有点棘手。也许这篇文章可以让你更深入地了解这一点：

您应该广泛使用jquery的.hover（）函数

退房,

样品和你可以很容易地做到这一点

确切地说，您应该使用以下两个内置函数：

$(selector).hover(handlerIn, handlerOut);

$(selector).click(event);

干杯
你能发布你的密码吗？这是为了让我们更容易理解并给出解决方案。我调用一个函数来改变背景颜色。。。复制粘贴功能请。。。我想我会说我做了一架飞机。为什么它不能飞行？无法使用jQuery，因为。。。嗯，我从来没有研究过。Jsut三天前开始使用HTML、CSS和JS，所以我想先看看这些东西是如何工作的。既然我不懂，你能详细介绍一下你的解决方案吗？
classList
api几乎一样好（遗憾的是，它没有完全跨浏览器）。提前谢谢。不过，您不必创建整个JSFIDLE，只要一行代码，我就可以用JS更改/切换div的样式，并简要说明它是如何工作的。jQuery只是一个包含许多有用JS函数的库。。。因此，首先您必须在html的头部某处包含jQuery本身。。。这样你就可以利用它的功能。。。在调用函数之前，必须包含它。然后，您可以在
.js
文件或脚本块中编写jQuery函数，就像处理其他js脚本一样。当然，您可以将jQuery函数与任何本机JS组合起来。并查看如何将其集成到页面中。您还可以在上找到关于所有函数的详细文档，以及大量教程。希望这有帮助^_^