用于隐藏<span>的Java脚本功能？

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/