javascript - 隐藏<span>的Javascript函数？

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 :

hidden
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

你应该关闭你的<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/