Java腳本函數隱藏一個<span>？

Question

嗨，我有以下代碼：

<a onclick="show_login()">Login 
<span id="login" style="visibility: hidden"> 
<form method="post" action="login.php"> 
<label for="username">Username:</label> 
<input type="text" name="username" /></a> 
<label for="password">Password:</label> 
<input type="password" name="password" /> 

<input type="submit" name="login" value="Login" /> 
</form> 
</span> 

我想知道如何隱藏/顯示使用功能名稱「show_login」跨越。我將如何去做這件事？

Answer 1

您可能不應該使用<span>，<div>會爲您提供更好的服務。而visibility可能不是你想要什麼或者，visible: hidden：

隱藏
生成的框是無形的（完全透明的，沒有什麼是畫），但仍然影響佈局。此外，如果元素的「可見性：可見」，元素的後代將可見。

而且您應該在登錄表單之前關閉您的<a>。

您可能想要使用display: none和display: block。因此，像這樣：

<a onclick="toggle_login()">Login</a> 
<div id="login" style="display: none"> 
    <form method="post" action="login.php"> 
     <label for="username">Username:</label> 
     <input type="text" name="username" /></a> 
     <label for="password">Password:</label> 
     <input type="password" name="password" /> 
     <input type="submit" name="login" value="Login" /> 
    </form> 
</div> 

和：

function toggle_login() { 
    var div = document.getElementById('login'); 
    div.style.display = div.style.display == 'none' ? 'block' : 'none'; 
    return false; 
} 

活生生的例子：http://jsfiddle.net/ambiguous/6ngnU/1/

Answer 2

設置樣式爲display：none來開始和使用jQuery的性能表現，使其出現時你想要它。

http://api.jquery.com/show/