Question

我想在单击按钮时隐藏div并在单击链接时显示它，但发生的事情是它只是闪烁，无论是显示还是隐藏它。无论我尝试更改其在页面上的可见性的方式，它都会这样做：更改顶部：-1000px;顶部：0px;或可见性：隐藏到可见性：可见或使用显示“”vs“无”属性。所有这些都会导致它出现（如果可见）闪光灯，或者闪光灯消失（如果隐藏）。

我在单击显示div的链接时调用JS函数，并在div中提交表单时调用JS函数以再次隐藏div。

为什么会发生这种情况的任何线索？

关于可能相关的页面的几点：

- 在onLoad期间，通过Javascript为Body {}绘制了一些元素，但不包含那些包含此元素或元素本身的元素。

-this

<script language="JavaScript" src = "dashboard.js">
    </script>

...在head部分调用，包括以下函数

- 我也尝试将隐藏/显示功能直接放在html代码中的相关div之后，但没有变化。

div的

.css：

    div#userRegistration{
    text-align: center;
    width: 100%;
    height: 150%;
    position: absolute;
    background-color: white;
    z-index: 20;
    top: -1000px;
}

显示的JS函数 - 更新如下：

function userRegistration(){
   document.getElementById("userRegistration").style.top = '0px';
   return true;
}

要隐藏的JS函数（请注意，除非我能让div显示并保留在第一位，否则永远不会被使用） - 更新：

function validateUserRegistration(){
    document.getElementById("userRegistration").style.display = 'none';
    return true;
}

更新的HTML（根据以下2条建议）：

        <div id="userRegistration">
            <h3>New User Registration:</h3>
            <form style="text-align: left;" action="" onsubmit="return validateUserRegistration();">
                <table>
                    <tr>
                        <td>
                            Email:
                        </td>
                        <td>
                            <input type="text" name="userName"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            User Name:
                        </td>
                        <td>
                            <input type="text" name="userName"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Password:
                        </td>
                        <td>
                            <input type="password" name="password"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Repeat Password:
                        </td>
                        <td>
                            <input type="password" name="repeatPassword"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;&nbsp;
                        </td>
                        <td>
                            <input type="submit" name="submitRegistration" value="Submit"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>

编辑：重新加载页面下面的空href =“”是造成“闪光”的原因。感谢techtheatre引起我的注意。 / EDIT

最初显示div的HTML（如果在页面加载时已经显示div，则会尝试隐藏div）：

<div id="newUser">
   <a href="" onclick="return userRegistration();">

     New User? Register here.

   </a>
</div>

Answer 1

将return true;添加到大括号内的两个函数的末尾

修改

另一件事......提交表格时应该发生什么？您已将操作留空。如果它提交回同一页面（这是它与当前HTML的作用），您的整个页面将重新加载。这将使其隐藏一瞬间，然后在页面重新加载时重新出现。如果您尝试在没有页面重新加载的情况下提交表单数据，则需要在AJAX调用中实现此...

调整可见性时，div元素会闪烁

1 个答案: