Javascript 我有三个；a「；类别'；它会在选中时更改颜色，但我需要在加载页面时将其设置为默认值

我在这个项目上工作，我需要添加这个功能，我们有三个产品上市

他们一开始是div，但后来改为ahref类以连接整个区域

框在悬停时必须改变颜色-我已经这样做了。 当点击时，盒子需要换成另一种颜色——我也这样做了

有一件事我搞不清楚，那就是如何使第二个框默认为选中，但当另一个框被选中时，将其颜色关闭

这是我为页面准备的javascript

var highlightLink = function () {
    var active = null, colour = '#f6efa2';
    if (this.attachEvent) this.attachEvent('onunload', function () {
        active = null;
    });
    return function (element) {
        if ((active != element) && element.style) {
            if (active) active.style.backgroundColor = '';
            element.style.backgroundColor = colour;
            active = element;
        }
    };

}();

这是一个盒子

<a class="productBox1" href="#" border="0" onclick="highlightLink(this);">

我想在body标签中需要一个onload函数，但我不知道需要什么代码，我还需要在选择另一个框时将其取消选中

---

任何帮助都将不胜感激。

听起来你把事情弄得比实际情况更复杂了。试试这个（我假设您的所有a标记都有productBox1类）：

然后创建一个名为highlighted的css类，该类具有

背景色：#f6efa2

。

---

为了使其正常工作，您需要

如果每个链接都有自己的类，请将其用作ID：

<a id="productBox1" href="#" border="0" onclick="highlightLink(this);">

---

在

中，所有链接是否共享一个公共类（并且它们是唯一具有该类的元素）？是否可以向链接添加ID？您需要能够检索要突出显示的链接。您不需要监听

load

事件，您可以将选择元素的代码放在页面底部，在关闭

标记之前。现在，我为每个productbox创建了一个CSS类，因此有.productBox1、.productBox2、.productBox3——假设它们几乎相同。但我认为我必须区分它们，以获得某种脚本来识别我想要突出显示的框，因为你可以看出我不是一个优秀的程序员，我看不到提到jQuery的OP。事实上，我提到你需要jQuery才能使它工作。我强烈建议学习如何使用它，因此我将它添加到任何涉及javascript的答案中。请不要乱翻我的答案，这样你可以让你的答案看起来更好。如果有可能通过屏幕亲吻你，我会的。非常感谢你！！

<a id="productBox1" href="#" border="0" onclick="highlightLink(this);">

<script type="text/javascript">
    highlightLink(document.getElementById('productBox1'));
</script>

window.onload = function() {
    highlightLink(document.getElementById('productBox1'));
}