jQuery .show() 仅适用于瞬间答案

【问题标题】：jQuery .show() only works for a split secondjQuery .show() 仅适用于瞬间
【发布时间】：2013-05-02 23:06:29
【问题描述】：

我有一个 div

    <div id="fade_bg">
        <div id="login_div">
            <form action="../classes/login/Authenticator.php" method="post">
                <p>username: <input type="text" name="username" /></p>
                <p>password: <input type="password" name="password" /></p>
                <p><input type="submit" name="login" /></p>
            </form>
            <p><a id="cancel" href="#">cancel</a>
        </div>
    </div>

我只想在什么时候显示

<a id="login" href="">Admin login</a>

被点击。我用过

        $(function() {

            $('a#login').click(function() {
                $('#fade_bg').show();
                $('#login').hide();
            });

            $('a#cancel').click(function() {
                $('#fade_bg').hide();
                $('#login').show();
            });
        });

但是，当我单击链接时，我想出现的 div 只出现一瞬间，然后像单击取消按钮一样恢复正常。为什么会这样？

编辑：JS 调试器控制台上没有错误。

【问题讨论】：

当您提交表单时，我相信它喜欢刷新页面。尝试添加onsubmit="false"
您需要阻止锚点的默认操作。在某些浏览器中，空的 href 会重新加载页面，而 hash href 会滚动到顶部：
首先我认为在你的调用中使用 e.preventDefault 是个好主意，你需要在引入一些新功能时防止锚的默认行为
看起来你的答案如下

标签： jquery css html hide show

【解决方案1】：

试试这样：

$('#login').click(function (e) {
    e.preventDefault();
    $('#fade_bg').show();
    $(this).hide();
});

$('#cancel').click(function (e) {
    e.preventDefault();
    $('#fade_bg').hide();
    $('#login').show();
});

DEMO HERE

【讨论】：

【解决方案2】：

提交按钮总是发布表单，所以

<input type="submit" name="login" />

替换为

<input type="button" name="login" />

【讨论】：