我有三个“a”选择时会改变颜色的类，但我需要在页面加载时将其设置为默认值

Question

我正在开发这个项目，我需要在列出了三种产品的地方添加此功能。

他们最初是 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;
        }
    };

}();

这是我认为我需要在 body 标记中添加一个 onload 函数的框之一

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

，但我不知道需要什么代码，并且我还需要在选择另一个框时将其取消选中。

任何帮助将不胜感激。

Answer 1

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

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

将类用于公共属性。要识别单个元素，请使用 ID。

然后，您可以将其添加到页面底部（结束 标记上方）：

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

或

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

在 中设置。

Answer 2

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

$('.productBox1').click(function() {
    $('.highlighted').removeClass('highlighted');
    $(this).addClass('highlighted');
});

然后有一个名为highlighted的css类，它有背景颜色：#f6efa2。
您需要 jQuery 才能使其正常工作。