[英]javascript functions to show and hide divs
Hello I have the following 2 JavaScript functions to open up a div and to close it. 您好我有以下2个JavaScript函数来打开div并关闭它。
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
}
</script>
<script>
function close() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
}
</script>
Here is the html: 这是html:
<div id="opener"><a href="#1" name="1" onclick=show()>click here</a></div>
<div id="benefits" style="display:none;">
some input in here plus the close button
<div id="upbutton"><a onclick=close()></a></div>
</div>
For some reason the show function works how it should, but the close button does not do its job. 由于某种原因,show函数应该如何工作,但关闭按钮不起作用。 So if there is someone who could help me out I really would appreciate.
所以,如果有人可以帮助我,我真的很感激。 Thanks a lot.
非常感谢。
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
return false;
}
</script>
<div id="opener"><a href="#1" name="1" onclick="return show();">click here</a></div>
<div id="benefits" style="display:none;">some input in here plus the close button
<div id="upbutton"><a onclick="return hide();">click here</a></div>
</div>
I usually do this with classes, that seems to force the browsers to reassess all the styling. 我通常使用类来执行此操作,这似乎迫使浏览器重新评估所有样式。
.hiddendiv {display:none;}
.visiblediv {display:block;}
then use; 然后使用;
<script>
function show() {
document.getElementById('benefits').className='visiblediv';
}
function close() {
document.getElementById('benefits').className='hiddendiv';
}
</script>
Note the casing of "className" that trips me up a lot 请注意“className”的外壳让我感到很沮丧
The beauty of jQuery would allow us to do the following: jQuery的美妙之处在于我们可以执行以下操作:
$(function()
{
var benefits = $('#benefits');
// this is the show function
$('a[name=1]').click(function()
{
benefits.show();
});
// this is the hide function
$('a', benefits).click(function()
{
benefits.hide();
});
});
Alternatively you could have 1 button toggle the display, like this: 或者,您可以使用1个按钮切换显示,如下所示:
$(function()
{
// this is the show and hide function, all in 1!
$('a[name=1]').click(function()
{
$('#benefits').toggle();
});
});
You need the link inside to be clickable, meaning it needs a href with some content, and also, close() is a built-in function of window, so you need to change the name of the function to avoid a conflict. 你需要里面的链接是可点击的,这意味着它需要带有一些内容的href,而且,close()是窗口的内置函数,所以你需要更改函数的名称以避免冲突。
<div id="upbutton"><a href="#" onclick="close2()">click to close</a></div>
Also if you want a real "button" instead of a link, you should use <input type="button"/>
or <button/>
. 此外,如果您想要一个真正的“按钮”而不是链接,您应该使用
<input type="button"/>
或<button/>
。
check this: 检查一下:
<div id="benefits" style="display:none;">some input in here plus the close button <div id="upbutton"><a onclick="close(); return false;"></a></div> </div>
Rename the closing function as 'hide', for example and it will work. 例如,将关闭函数重命名为“隐藏”,它将起作用。
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
}
Close appears to be a reserved word of some sort (Possibly referring to window.close). Close似乎是某种保留字(可能是指window.close)。 Changing it to something else appears to resolve the issue.
将其更改为其他内容似乎可以解决问题。
You can zip the two with something like this [like jQuery does]: 你可以用这样的东西压缩这两个[像jQuery一样]:
function toggleMyDiv() {
if (document.getElementById("myDiv").style.display=="block"){
document.getElementById("myDiv").style.display="none"
}
else{
document.getElementById("myDiv").style.display="block";
}
}
..and use the same function in the two buttons - or generally in the page for both functions. ..并在两个按钮中使用相同的功能 - 或者通常在两个功能的页面中使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.