Question

我有一个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调试器控制台上没有错误。

Answer 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

Answer 2

提交按钮始终发布表单

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

将其替换为

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

jQuery .show（）仅适用于瞬间

2 个答案: