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”隐藏/显示该span。我该怎么做呢？

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函数show使其在您需要时显示。

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

Javascript函数隐藏<span>？</span>

2 个答案: