javascript - 启用禁用按钮 html5/css/javascript

Question

我做了一个计算器。我已将其上传到以下网页。

www.vipulshree.com

我想在单击它时突出显示一个按钮，并在单击另一个按钮时从中删除突出显示。单击下一个按钮时，它应该更改颜色/禁用/突出显示，并且上一个按钮恢复正常。请帮助我，我在网上搜索了这个，但找不到任何东西。帮助我绝望。

谢谢你。

Answer 1

使用:focusCSS 伪选择器。它将匹配当前具有焦点的元素。 似乎不适用于按钮

---

使用 JavaScript 在点击时添加一个类.focused，并在所有其他元素上删除它。在所有按钮的公共父级上使用事件委托（在此代码中，假定为#container）。

<script type="text/javascript">
    setFocus = function(e) {
        if (document.getElementsByClassName('focus')[0]) document.getElementsByClassName('focus')[0].className = '';
        if (e.target.tagName.toLowerCase() == 'button') {
            e.target.className = 'focus';
        }
    };
    document
       .getElementById('container')
        .onclick = setFocus;
</script>

我的 HTML 标记如下所示：

<div id="container">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</div>

工作示例

Answer 2

你可以为你的按钮定义一个类，然后使用点击事件你可以改变它的颜色，当你点击任何按钮时，将它保存在变量中，比如“previous”。

因此，当您单击任何其他按钮时，您将再次更改已保存按钮变量的颜色并将当前按钮分配给该变量。

var previous;
document.getElementsByClassName("className").onclick = function (){
    // change the color of the previous element
    previous = this;
    // change the color of this button
}

Answer 3

这是一个小的 jsfiddle 工作示例，它仅将 jQuery 用于 dom 就绪加载器和一个 CSS 类来实现高亮效果。

http://jsfiddle.net/t6bJ3/

    var buttons = document.getElementsByTagName('button'),
        buttonsLength = buttons.length,
        selected, 
        i = 0, 
        reset = function() {
            for (i = 0; i < buttonsLength; i++) buttons[i].className = '';
        },
        highlight = function(ev) {
            reset();
            ev.target.className = 'highlight';
        };

    for (; i < buttonsLength; i++) buttons[i].onclick = highlight;