2

我已经设置了 6 个 div，当我单击每个 div 时，都会对其进行某种div更改innerHTML，就像某种菜单一样。当用户将鼠标悬停在那些“按钮”（实际上是 div）上时，它们会使用 CSS 的 property 突出显示:hover。还有:active，当用户单击“按钮”时。

由于单击时“信息” div 会发生变化，因此我希望当前选定的 div 不断突出显示，其颜色与悬停时完全不同。所以我为此使用了javascript。我调用一个函数来更改所有“按钮”的背景颜色（因此我不必“记住”单击了哪个按钮），然后将thisdiv更改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是一个字符串，menubuttonX是 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;
}
4

2 回答 2

5

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

为了进一步解释这个想法：

当您单击一个按钮时，您将一个类添加到其类属性中，而不是添加内联样式属性。这允许通过您的 CSS 样式表设置它们的样式。

在 jQuery 中，这真的很容易。你可以这样做：

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

一步步：

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

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

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

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

添加类currentti "this" ... 表示单击的对象。

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

<div class="menubutton current">

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

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

演示

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

如何在 JavaScript 中添加/删除类？

于 2013-07-02T11:27:10.547 回答
1

您应该广泛使用 jquery 的 .hover() 函数。

查看http://api.jquery.com/hover/和http://api.jquery.com/click/

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

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

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

$(selector).click(event);

干杯

于 2013-07-02T12:02:13.807 回答