简体   繁体   English

使用Java隐藏/显示额外内容

[英]Hiding/Showing extra content using Javascript

I havent used Javascript in a while and I have almost forgotten it all but I would like to be reminded how to show and hide html div boxs to display hidden content by clicking on a text or such. 我已经有一段时间没有使用Javascript了,我几乎都忘记了它,但是我想提醒我如何通过单击文本等来显示和隐藏html div框以显示隐藏的内容。

In this case I would like to have a hidden box filled with login information while the ahref link will be the indicator to tell the loginbox to appear or disappear and by knowing this I could easily apply it to the register area. 在这种情况下,我希望有一个包含登录信息的隐藏框,而ahref链接将指示登录框出现或消失,并且知道了这一点后,我可以轻松地将其应用于注册区域。

I would like to know how to do this or a pop up box sort of thing. 我想知道如何执行此操作或弹出框之类的操作。

This is what I have so far: Could anyone help me with this now. 到目前为止,这就是我的意思:现在有人可以帮助我。 I can't seem to get it work. 我似乎无法正常工作。

The toggle is 切换是

<a href="#" onclick="showStuff('signup'); return false;"> Login</a>

Showing content 显示内容

<div class="signup" style="display: none;">
<p> test </p>
</div> 

Javascript is function showStuff(signup) { document.getElementById('signup').style.display = 'block'; Javascript是函数showStuff(signup){document.getElementById('signup')。style.display ='block'; } }

Why won't this work 为什么不行

Looks like the issue with your code is that your div has a class as 'signup' not an id. 看起来您的代码存在问题,是您的div的类为“ signup”而不是ID。 try: 尝试:

<div id="signup" style="display: none;">
<p> test </p>
</div> 

See this jsfiddle for a working example with an additional fix to how your function works. 请参阅此jsfiddle,获取一个有效示例,其中包含函数功能的其他修复程序。 http://jsfiddle.net/aUQ6B/ http://jsfiddle.net/aUQ6B/

Original Answer: 原始答案:

See: javascript hide/show element 请参阅: javascript隐藏/显示元素

Code to make note of is the following: 需要注意的代码如下:

document.getElementById('myid').style.display 

Setting this to 'none' hides the element. 将此设置为“ none”将隐藏该元素。
Setting it to 'block, 'inline' or whatever the original value was will show the element. 将其设置为“ block”,“ inline”或任何原始值将显示该元素。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM