调整可见性时 div 元素闪烁

Question

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

点击链接显示div时调用JS函数，div中提交表单时调用JS函数再次隐藏div。

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

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

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

-这个

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

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

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

.css 为 div：

    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 让我注意到这一点。 /编辑

最初显示 div 的 HTML（如果它在页面加载时已经可见，则与尝试隐藏 div 时的效果相同）：

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

     New User? Register here.

   </a>
</div>

Answer 1

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

编辑：

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