如何防止元素保持活跃？答案

【问题标题】：How to prevent element from staying active?如何防止元素保持活跃？
【发布时间】：2015-01-06 15:58:05
【问题描述】：

我在单页应用程序上有一个模式，当用户进行特定操作时会弹出。如果用户按下其中一个按钮（是/否），则模式关闭。如果再次弹出相同的模式，则最后按下的按钮保持活动状态。我使用伪类:active 在按下按钮时更改按钮背景。

这发生在一些安卓触控设备上。

HTML：

<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <p class="modal-title" data-bind="lang: Title"></p>
            </div>
            <div class="modal-body" data-bind="lang: Body">
            </div>
            <div class="modal-footer">
                <div class="exitFooterButtons">
                    <div class="ExitButton">
                        <div data-event="yes" data-bind="lang: 'Modal.Yes'"></div>
                    </div>
                    <div class="ExitButton" data-event="no" data-bind="lang: 'Modal.No'"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

modal .modal-content .modal-footer .ExitButton {
    line-height: 54px;
    width: 50%;
    display: table-cell;
    border-top: 1px solid black;
    cursor: pointer;
    font-size: 18px;
    height: 54px;
    border: 0;
    margin: 0;
    float: left;
    color: #c6c6c6;
    border-radius: 0;
    background: url(../Images/headerRowBackground.png) repeat-x; 
}

和：主动

modal .modal-content .modal-footer .ExitButton:active {
    background: url(../Images/reverseHeaderRowBackground.png) repeat-x;
}

如果我第一次按 NO，然后第二次返回模态，那么 NO 仍然处于活动状态。如果我然后按“是”并第三次再次返回，则它们都处于活动状态。

【问题讨论】：

您是使用 jquery 插件作为模态还是自定义编码？
这是我们自己设计的引导模式。

标签： javascript android html css single-page-application

【解决方案1】：

我设法通过将 div 替换为 buttons 来解决此问题

        <div class="exitFooterButtons">
            <div class="ExitButton">
                <button data-event="yes" data-bind="lang: Languages.Yes"></button>
                <button data-event="no" data-bind="lang: Languages.No"></button>
            </div>
        </div>

总之，一些 android(~4.2) 设备在分配给 div's 时不喜欢 :active 伪类。

【讨论】：