javascript - Java script function to hide a <span>? - Stack Overflow

admin管理员组

文章数量:1293159

Hi i have the following code:

<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>

I want to know how to hide/show that span using the function name "show_login". How would i go about doing this?

Hi i have the following code:

<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>

I want to know how to hide/show that span using the function name "show_login". How would i go about doing this?

• javascript
• css
• html

Share Improve this question Follow edited Aug 20, 2011 at 2:58 emboss 39.7k77 gold badges102102 silver badges109109 bronze badges asked Aug 20, 2011 at 2:53 Duncan PalmerDuncan Palmer 7311 gold badge11 silver badge55 bronze badges 1

• You have some mismatched tags; the a tag ends inside of the span (and the span tag started in the a tag). You might get some unexpected behavior unless your tags are matched. – icktoofay Commented Aug 20, 2011 at 2:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You probably shouldn't be using a <span> for that, <div> would serve you better. And visibility probably isn't what you want either, 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'.

And you should close your <a> before the login form.

You probably want to use display: none and display: block. So something like this:

<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>

And:

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

Live example: http://jsfiddle/ambiguous/6ngnU/1/

Set the style to display: none to start with and use the jquery function show to make it appear when you want it.

http://api.jquery./show/

本文标签： javascriptJava script function to hide a ltspangtStack Overflow