Question

我正在尝试使用CSS和Javascript创建类似灯箱的效果。我通过它的id（OverlayContainer）得到一个元素，它将改变它的类名，以适应现在的黑暗背景。我已经设置了代码，它检查元素的类名值（OverlayContainer），以查看类名是设置为非活动（正常背景）还是活动（更暗）。但是，当我按下提交按钮更改状态时，它似乎会更改类一秒钟（屏幕变暗一秒钟），但然后恢复到原始状态（OverlayInactive）。如果有人对此发生任何解释，请回复。

这是我的CSS代码：

.OverlayBoxInactive {
    background-color: rgba(0, 0, 0, 0);

    position: absolute;
    width: 0%;
    height: 0%;

    top: 0px;
    left: 0px;
}

.OverlayBoxActive {
    background-color: rgba(0, 0, 0, 0.85);

    position: absolute;
    width: 100%;
    height: 100%;

    top: 0px;
    left: 0px;
}

这是我的Javascript代码：

function ActivateOverlay() {

    var overlayBox = document.getElementById("OverlayContainer");
    var elementClassName = overlayBox.className;

    if (elementClassName == "OverlayBoxInactive") {
        overlayBox.setAttribute("class", "OverlayBoxActive");
        //alert('Overlay Activated');
    } else if (elementClassName == "OverlayBoxActive") {
        overlayBox.setAttribute("class", "OverlayBoxInactive");
        //alert('Overlay Inactivated');
    }

}

提前致谢，

-Realitiez

编辑帖子：http://jsfiddle.net/bk5e9t0e/

Answer 1

input type="submit"的默认操作是将表单的数据发布回服务器，这会导致页面重新加载。这就是你的课程被删除的原因。

如果您希望阻止页面重新加载，则需要阻止默认操作。最简单的方法是从onclick处理程序返回false：

onclick="ActivateOverlay(); return false;"

Answer 2

您的代码无效，因为：

您使用的是输入type=submit [因此您获得了一种刷新页面的感觉]，在点击处理程序中应为type=button或return false;
您正在调用函数ActivateOverlay，该函数的定义晚于调用本身。

在jsFiddle中找到您的解决方案

<script>
    function ActivateOverlay() {
        //alert('Overlay Activated');

        var overlayBox = document.getElementById("OverlayContainer");
        var elementClassName = overlayBox.className;

        if (elementClassName == "OverlayBoxInactive") {
            overlayBox.setAttribute("class", "OverlayBoxActive");
            //alert('Overlay Activated');
        } else if (elementClassName == "OverlayBoxActive") {
            overlayBox.setAttribute("class", "OverlayBoxInactive");
            //alert('Overlay Inactivated');
        }
    }
</script>
<div id="OverlayContainer" class="OverlayBoxInactive"></div>
<div class="main"></div>
<fieldset>
    <form>
        <input type="button" onclick="ActivateOverlay();return false" value="Hit Me"></input>
    </form>
</fieldset>
<script type="text/javascript" src="index.js"></script>

http://jsfiddle.net/4queag8m/

Answer 3

您需要在函数中添加preventDefault（）。它正在重新加载页面。

首先将元素添加到您的调用中：

onclick="ActivateOverlay(this)"

然后将带有“阻止”的参数添加到您的函数中 - 就像这样＆＃34;

function ActivateOverlay(evt) {
    evt.preventDefault()

    ...
}

更改后，类名将恢复为原始状态

3 个答案: