2013-05-08 91 views
3

我有一個divjQuery的.show()僅適用於一秒鐘

<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調試器控制檯上沒有錯誤。

+0

替換它相信它喜歡刷新頁面年齡。嘗試添加'onsubmit =「false」' – 2013-05-08 16:18:38

+0

您需要防止錨點的默認操作。在一些瀏覽器中,一個空href將重新加載頁面,並且一個哈希href將滾動到頂部: – adeneo 2013-05-08 16:18:57

+1

首先我認爲在你的調用中使用e.preventDefault是一個好主意,你需要阻止你的默認行爲正在推出一些新功能 – Richlewis 2013-05-08 16:19:09

回答

10

嘗試這樣的:

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

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

DEMO HERE

+0

完美!謝謝! – mishmomo 2013-05-08 16:21:02

+0

很高興幫助! – 2013-05-08 16:22:50

0

當你提交一個表單我的提交按鈕總是發佈形式,從而

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

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