jQuery .show（）仅适用于一秒钟 [英] jQuery .show() only works for a split second

问题描述

我有一个div

 < div id =fade_bg> 
< div id =login_div> 
< form action =../ classes / login / Authenticator.phpmethod =post> 
< p>使用者名称：< input type =textname =使用者名称/>< / p> 
< p>密码：< input type =passwordname =password/>< / p> 
< p>< input type =submitname =login/>< / p> 
< / form> 
< p>< a id =cancelhref =＃>取消< / a> 
< / div> 
< / div> 
  

我只想显示何时

 < a id =loginhref =>管理员登入< / a>点击
  

。我用

  $（function（）{
 
 $（'a＃login'）。click （函数（）{
 $（'＃fade_bg'）。show（）; 
 $（'＃login'）。hide（）; 
}）; 
 
 $（'a＃cancel'）。click（function（）{
 $（'＃fade_bg'）。hide（）; 
 $（'＃login'）。show（）; 
}）; 
}）; 
  

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

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

解决方案 （b）

$ p $ $''$'$'$''''。click（function（e）{
e.preventDefault（）;
$（'＃fade_bg'）。show（）;
$（this）.hide（）;
}）;
$ b $（'＃cancel'）。click（function（e）{
e.preventDefault（）;
$（'＃fade_bg'）。hide（）;
$（'＃login'）。show（）;
}）;

DEMO HERE

I have a 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>

That I only want to show when

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

is clicked. I used

        $(function() {

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

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

However, when I click the link, the div I want to appear only appears for a split second, then returns to normal as if I clicked the cancel button. Why is this happening?

Edit: No errors on the JS debugger console.

解决方案

Try like this:

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

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

DEMO HERE

这篇关于jQuery .show（）仅适用于一秒钟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！