0

我有超过 3 个按钮，每个按钮都有不同的样式（不同的边框颜色，悬停时不同的背景颜色）。（我创建它们是<li>因为它们具有更改图片背景位置的动作）。

我希望它们在单击后保持相同的悬停状态外观，但在单击另一个按钮时返回正常状态。

我怎样才能做到这一点？先感谢您 ：）

ps：我在需要时使用 css、js 处理 HTML（就像在这种情况下一样）。

4

1 回答 1

0

鉴于完全缺乏有关您正在使用的 HTML 和当前 JavaScript 的信息，我能提供的最好的方法是简单演示如何实现这一点：

function colorify (e) {
    // get a reference to the element we're changing/working on:
    var demo = document.getElementById('demo'),
        /* getting the siblings, the other controls,
           of the clicked-element (e.target):
        */
        controls = e.target.parentNode.children;
    // iterating over those controls
    for (var i = 0, len = controls.length; i < len; i++) {
        /* if the current control[i] is the clicked-element, we 'add' the 'active'
           class, otherwise we 'remove' it (using a ternary operator):
        */
        controls[i].classList[controls[i] == e.target ? 'add' : 'remove']('active');
    }
    /* changing the background-color of the 'demo' element, setting it to the
       textContent of the clicked-element:
    */
    demo.style.backgroundColor = e.target.textContent;
}

var controls = document.getElementById('controls');

controls.addEventListener('click', colorify);

JS 小提琴演示。

以上基于以下HTML：

<div id="demo"></div>
<ul id="controls">
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

和 CSS：

#demo {
    width: 10em;
    height: 10em;
    border: 2px solid #000;
}

.active {
    color: #f00;
}

这种方法需要浏览器实现classListAPI、childrenDOM 节点的属性以及 Node.js 的addEventListener()方法。

参考：

于 2013-10-26T23:18:03.953 回答