Question

我有6个div，当我点击每个div时，某个div会更改其innerHTML，就像某种菜单一样。当用户将鼠标悬停在那些“按钮”（实际为div）上时，它们会突出显示CSS的属性:hover。当用户点击“按钮”时，还有:active。

由于“信息”div在点击时会发生变化，因此我希望不断突出显示当前所选的div，其颜色与悬停时的颜色完全不同。所以我使用了javascript。我调用一个函数来改变“按钮”的所有的背景颜色（所以我不必“记住”单击了哪一个），然后更改this div的{{ 1}}适当的颜色。

但是，现在我丢失了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"; }是一个字符串，meaning是6个div，就像按钮一样。

menubuttonX

Answer 1

而不是使用javascript更改颜色，使用javascript添加和删除类（例如.current）到活动“按钮”，然后在CSS中相应地设置.current类的样式。使用addClass()，removeClass()或toggleClass()函数，jQuery将是最优雅的解决方案。

进一步解释这个想法：

单击某个按钮时，会向其类属性添加一个类，而不是添加内联样式属性。这允许通过CSS样式表对它们进行样式化。

在jQuery中它非常简单。你可以这样做：

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

步骤一步：

首先通过调用menubutton来查找类$(".menubutton")的所有DOM元素。然后使用.click()触发一个事件，如果点击了menubutton个元素之一。 function(){}包括在点击时执行的功能。第一

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

再次获取类menubutton的所有对象，并从拥有它的任何一个中删除类current。第二

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

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

这会使 DOM 中的点击对象看起来像这样：

<div class="menubutton current">

在 CSS 中，您现在可以设置具有附加current类的对象的样式：

.currnet {
    background-color:blue;
    color:white;
}

DEMO

在纯JavaScript中，这会有点棘手。也许这个主题可以让你更深入地了解它：

How to add/remove a class in JavaScript?

Answer 2

你应该广泛使用jquery＆＃39; .hover（）函数。

查看http://api.jquery.com/hover/＆amp; http://api.jquery.com/click/

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

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

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

$(selector).click(event);

干杯

用javascript效果改变背景颜色CSS：悬停

2 个答案:

进一步解释这个想法：

步骤一步：

DEMO