问题显示：无/通过JavaScript阻止div [英] problem display:none/block divs via JavaScript
问题描述
你好，
如果我让你自己看一下，它会更快更轻松地解决问题的原因。 ，所以我会发布我的页面来源（当然是取出的实际内容）。
[HTML]<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Transitional // EN" http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns =" http：// www .w3.org / 1999 / xhtml">
< head>
< meta http-equiv =" Content-Language"含量=" EN-US" />
< meta http-equiv =" Content-Type"含量=" text / html的;字符集= UTF-8英寸/>
< / head>
< style>
p
{
保证金：0px;
填充：0px;
}
body，html
{
宽度：100％;
身高：100％;
保证金：0px;
填充：0px;
背景颜色：＃e9e9e9;
}
表格< br $>
{
保证金：0px;
填充：0px;
}
.favBg
{
显示：无;
border：0px;
padding：0px;
保证金：0px;
宽度：100％;
仓位：绝对值;
背景色：＃ 000000;
不透明度：0.5;
过滤器：Alpha（不透明度：50）;
z-index：999;
}
.favArea
{
display：none;
border-width ：1px;
border-style：solid;
border-color：＃125717;
padding：0px;
位置：绝对;
背景颜色：白色;
z-index：1000;
}
.button1
{
display：none;
margin-top：86px;
margin-bottom：0px;
margin-left：0px;
margin-r ight：0px;
填充：0px;
宽度：500px;
高度：295px;
位置：相对;
背景颜色：蓝色;
}
.button2
{
显示：无;
margin-top：86px;
margin-bottom：0px;
margin-left： 0px;
margin-right：0px;
填充：0px;
宽度：500px;
身高： 295px;
位置：相对;
背景颜色：红色;
}
。 button3
{
显示：无;
margin-top：86px;
margin-bottom：0px;
margin-left：0px;
margin-right：0px;
填充：0px;
宽度： 500px;
身高：295px;
职位：相对;
背景颜色：绿色;
}
.button4
{
display：none;
margin-top：86px;
margin-bottom：0px;
margin-left：0px;
margin-right：0px;
填充：0px;
宽度：500px;
身高：295px;
位置：相对;
背景颜色：黄色;
}
.infoMsg
{
padding-top：10px;
padding-bottom：0px;
padding-left：0px;
padding-right：0px;
margin-top：0px;
margin-底部：0px;
margin-left：10px;
margin-right：10px;
font-family：Verdana，Arial，Tahoma;
字体重量：更大胆;
字体大小：15px;
颜色：白色;
字母 - 间距：0px;
位置：相对;
}
.closeMsg
{
填充：0px;
margin-top：2px;
margin-bottom：0px;
margin-left： 5px;
margin-right：0px;
font-family：Verdana，Arial，Tahoma;
fon t-weight：none;
字体大小：12px;
颜色：黑色;
字母间距：0px;
位置：相对;
}
。按钮
{
border-宽度：2px;
border-style：solid;
border-color：black;
padding：0px;
margin-top：80px;
margin-bottom：0px;
margin-right：0px;
margin-left：0px;
}
< / style>
< script>
函数OffWindowHeight（）
{
var OffWindowHeight = 0;
window.scrollTo（0,10000000） ;
if（typeof self.pageYOffset！=''undefined''）
OffWindowHeight = self.pageYOffset;
else if（document.compatMode&& document.compatMode！=''BackCompat''）
OffWindowHeight = document.documentElement.scrollTop;
else if（document.body&& typeof（document.body） .scrollTop）！=''undefined''）
OffWindowHeight = document.body.scrollTop;
window.scrollTo（0,0）;
返回OffWindowHeight;
}
函数WindowHeight（）
{
var WindowHeight = 0;
if（typeof（window.innerWidth）==''number''）
WindowHeight = window.innerHeight;
else if（document.documentElement&& document.documentElement.clientHeight）
WindowHeight = document.documentElement.clientHeight;
else if（document .body&& document.body.clientHeight）
WindowHeight = document.body.clientHeight;
返回WindowHeight;
}
函数pHeight（）
{
var pHeight = OffWindowHeight（）+ WindowHeight（）;
返回pHeight;
}
函数favBg（）
{
var favHeight = document.getElementById（''favBg''）;
favHeight.style.height = pHeight（）+''px '';
}
var cdiv =" blank";
function favArea（）
{
if（cdiv ==" blank"）
{cdiv = window.setInterval（" favArea（）"，50）; }
var msgBox = document.getElementById（" favArea"）;
objh = parseFloat（msgBox.style.height）/ 2;
objw = parseFloat（msgBox.style.width）/ 2;
msgBox.style.top = Math.floor（Math.round（（document.documentElement.of fsetHeight / 2）+ document.documentElement .scrollTop）-objh）+''px'';
msgBox.style.left = Math.floor（Math.round（（document.documentElement.of fsetWidth / 2）+ document.documentElement。 scrollLeft）-objw）+''px'';
}
功能button1（）
{
var favBg = document.getElementById（''favBg''）;
favBg.style.display =''block'';
var favAreaMsg = document .getElementById（''favArea''）;
favAreaMsg.style.display =''block'';
var button1 = document.getElementById（''button1'' ）;
button1.style.display =''block'';
}
function button2（）
{
var favBg = document.getElementById（''favBg''）;
favBg.style.display =''block'';
var favAreaMsg = document.getElementById（''favArea''）;
favAreaMsg.style.display =''block'';
var button2 = document.getElementById（''button2 ''）;
button2.style.display =''block'';
}
function button3（）
{
var favBg = document.getElementById（''favBg''）;
favBg.style.display =''block'';
var favAreaMsg = document.getElementById（''favArea''）;
favAreaMsg.style.display =''block'';
var button3 = document.getElementById（''button3''）;
button3.style.display =''block'';
}
功能button4（）
{
var favBg = document.getElementById（''favBg''）;
favBg。 style.display =''阻止';
var favAreaMsg = document.getElementById（''favArea''）;
favAreaMsg.style.display =''block'';
var button4 = document.getElementById（''button4''）;
button4.style.display =''block'';
}
函数closeMsg（）
{
var favBg = document.getElementById（''favBg''）;
favBg.style.display =''none'';
var favAreaMsg = document.getElementById（''favArea''）;
favAreaMsg.style。 display =''none'';
var button1 = document.getElementById（''button1''）;
button1.style.display =''没有'';
var button2 = document.getElementById（''button2''）;
button2.style.display =''none'';
var button3 = document.getElementById（''button3''）;
button3.style.display =''none'';
var button4 = document.getElementById（''button4''）;
button4.style.display =''none'';
}
< / script>
< body onload =" favBg（）; favArea（）;">
< div id =" favArea"类= QUOT; favArea" style =" width：500px;身高：400px;">
< div id =" button1" class =" button1">< p class =" infoMsg"> button1< / p>< / div>
< div id =" button2" class =" button2">< p class =" infoMsg"> button2< / p>< / div>
< div id =" button3" class =" button3">< p class =" infoMsg"> button3< / p>< / div>
< div id =" button4" class =" button4">< p class =" infoMsg"> button4< / p>< / div>
< p class =" closeMsg">< a onclick =" closeMsg（）;">关闭< / a>< / p>
< / div>
< div id =" favBg" class =" favBg">< / div>
< div align =" center">
< div style =" ;宽度：400px;高度：200像素; background-color：white;">
< form action =" page.php" method =" post">
< input onclick =" closeMsg（）;按钮1（）;"类= QUOT;按钮" style =" color：blue;"类型= QUOT按钮"值= QUOT; button1的">
< input onclick =" button2（）;"类= QUOT;按钮" style =" color：red;"类型= QUOT按钮"值= QUOT; BUTTON2">
< input onclick =" button3（）;"类= QUOT;按钮" style =" color：green;"类型= QUOT按钮"值= QUOT; BUTTON3">
< input onclick =" button4（）;"类= QUOT;按钮" style =" color：yellow;"类型= QUOT按钮" value =" button4">
< / form>
< / div>
< / div>
< / body>
< / html> [/ HTML]
首先在Firefox中尝试上面的代码和歌剧。它运作良好。尝试按顺序点击，然后随机例如： - ''button1''然后''button4''然后''button2''一切都会好的。
同样尝试代码以上方式在Internet Explorer中，结果不同。它只是没有按照预期的方式工作，你可以通过在ff和opera中尝试来理解它。
in ie if like this：' 'button1''然后''button4''然后''button2''，它显示带有id''button4''没有文字的div，而不是带有id''button2''的div和带有'button2'的文本。
另请注意，在单击关闭时，运行closeMsg（）函数，将所有设置为''display：none''。
只需查看代码，您就会明白问题所在。如果我尝试解释它，我只会复杂化。
提前谢谢：）
hello,
Rather than going on a wild explanation on what''s the the problem, it''ll be much quicker and easier if i let you look at it yourself, so I''ll post my page source (actual contents taken out, of course).
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style>
p
{
margin: 0px;
padding: 0px;
}
body, html
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #e9e9e9;
}
form
{
margin: 0px;
padding: 0px;
}
.favBg
{
display: none;
border: 0px;
padding: 0px;
margin: 0px;
width: 100%;
position: absolute;
background-color: #000000;
opacity: 0.5;
filter: Alpha(opacity:50);
z-index: 999;
}
.favArea
{
display: none;
border-width: 1px;
border-style: solid;
border-color: #125717;
padding: 0px;
position: absolute;
background-color: white;
z-index: 1000;
}
.button1
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: blue;
}
.button2
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: red;
}
.button3
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: green;
}
.button4
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: yellow;
}
.infoMsg
{
padding-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
font-family: Verdana, Arial, Tahoma;
font-weight: bolder;
font-size: 15px;
color: white;
letter-spacing: 0px;
position: relative;
}
.closeMsg
{
padding: 0px;
margin-top: 2px;
margin-bottom: 0px;
margin-left: 5px;
margin-right: 0px;
font-family: Verdana, Arial, Tahoma;
font-weight: none;
font-size: 12px;
color: black;
letter-spacing: 0px;
position: relative;
}
.buttons
{
border-width: 2px;
border-style: solid;
border-color: black;
padding: 0px;
margin-top: 80px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}
</style>
<script>
function OffWindowHeight()
{
var OffWindowHeight=0;
window.scrollTo(0,10000000);
if(typeof self.pageYOffset!=''undefined'')
OffWindowHeight=self.pageYOffset;
else if(document.compatMode && document.compatMode != ''BackCompat'')
OffWindowHeight=document.documentElement.scrollTop ;
else if(document.body && typeof(document.body.scrollTop)!=''undefined'')
OffWindowHeight=document.body.scrollTop;
window.scrollTo(0,0);
return OffWindowHeight;
}
function WindowHeight()
{
var WindowHeight = 0;
if( typeof( window.innerWidth ) == ''number'' )
WindowHeight = window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight)
WindowHeight = document.documentElement.clientHeight;
else if(document.body && document.body.clientHeight)
WindowHeight = document.body.clientHeight;
return WindowHeight;
}
function pHeight()
{
var pHeight = OffWindowHeight() + WindowHeight();
return pHeight;
}
function favBg()
{
var favHeight = document.getElementById(''favBg'');
favHeight.style.height = pHeight() + ''px'';
}
var cdiv = "blank";
function favArea()
{
if (cdiv == "blank")
{ cdiv = window.setInterval("favArea()", 50); }
var msgBox = document.getElementById("favArea");
objh = parseFloat(msgBox.style.height)/2;
objw = parseFloat(msgBox.style.width)/2;
msgBox.style.top = Math.floor(Math.round((document.documentElement.of fsetHeight/2)+document.documentElement.scrollTop)-objh)+''px'';
msgBox.style.left = Math.floor(Math.round((document.documentElement.of fsetWidth/2)+document.documentElement.scrollLeft)-objw)+''px'';
}
function button1()
{
var favBg = document.getElementById(''favBg'');
favBg.style.display = ''block'';
var favAreaMsg = document.getElementById(''favArea'');
favAreaMsg.style.display = ''block'';
var button1 = document.getElementById(''button1'');
button1.style.display = ''block'';
}
function button2()
{
var favBg = document.getElementById(''favBg'');
favBg.style.display = ''block'';
var favAreaMsg = document.getElementById(''favArea'');
favAreaMsg.style.display = ''block'';
var button2 = document.getElementById(''button2'');
button2.style.display = ''block'';
}
function button3()
{
var favBg = document.getElementById(''favBg'');
favBg.style.display = ''block'';
var favAreaMsg = document.getElementById(''favArea'');
favAreaMsg.style.display = ''block'';
var button3 = document.getElementById(''button3'');
button3.style.display = ''block'';
}
function button4()
{
var favBg = document.getElementById(''favBg'');
favBg.style.display = ''block'';
var favAreaMsg = document.getElementById(''favArea'');
favAreaMsg.style.display = ''block'';
var button4 = document.getElementById(''button4'');
button4.style.display = ''block'';
}
function closeMsg()
{
var favBg = document.getElementById(''favBg'');
favBg.style.display = ''none'';
var favAreaMsg = document.getElementById(''favArea'');
favAreaMsg.style.display = ''none'';
var button1 = document.getElementById(''button1'');
button1.style.display = ''none'';
var button2 = document.getElementById(''button2'');
button2.style.display = ''none'';
var button3 = document.getElementById(''button3'');
button3.style.display = ''none'';
var button4 = document.getElementById(''button4'');
button4.style.display = ''none'';
}
</script>
<body onload="favBg(); favArea();">
<div id="favArea" class="favArea" style="width: 500px; height: 400px;">
<div id="button1" class="button1"><p class="infoMsg">button1</p></div>
<div id="button2" class="button2"><p class="infoMsg">button2</p></div>
<div id="button3" class="button3"><p class="infoMsg">button3</p></div>
<div id="button4" class="button4"><p class="infoMsg">button4</p></div>
<p class="closeMsg"><a onclick="closeMsg();">Close</a></p>
</div>
<div id="favBg" class="favBg"></div>
<div align="center">
<div style="width: 400px; height:200px; background-color: white;">
<form action="page.php" method="post">
<input onclick="closeMsg(); button1();" class="buttons" style="color: blue;" type="button" value="button1">
<input onclick="button2();" class="buttons" style="color: red;" type="button" value="button2">
<input onclick="button3();" class="buttons" style="color: green;" type="button" value="button3">
<input onclick="button4();" class="buttons" style="color: yellow;" type="button" value="button4">
</form>
</div>
</div>
</body>
</html>[/HTML]
Firstly try the above code in Firefox and opera. It works well. Try clicking then in order and randomly e.g:- ''button1'' then ''button4'' then ''button2'' everything will be good.
Similarly try the code in the above manner in internet explorer, the results are different. It just isn''t working the way it''s supposed to, as which you can understand from trying it out in ff and opera.
in ie if done like this: ''button1'' then ''button4'' then ''button2'', it the shows div with id ''button4'' with no text, instead of the div with id ''button2'' and text saying "button2".
Also notice that in clicking ''close'' the function closeMsg() is run, wich sets all to ''display: none''.
Just check out the code, you''ll understand what''s the problem. I''ll only complicate thinks if i try to explain it.
Thanks in advance :)
推荐答案
隐藏当你显示一个按钮时，其他按钮。
Hide the other buttons when you display a button.
但是我也想要4个按钮。
假设有四个按钮，每个按钮都会显示一个按钮点击时的div，在克隆关闭时关闭。在div上。
有4个按钮和4个div与每个按钮相关的内容（文本，图像等等在div中）。
考虑一个按钮画廊的例子。带有图像缩略图的div。
这里4个div共享全局背景div和包含div。只有包含div中的内容是不同的。所以不同的div放在包含div中，例如： - 画廊，徽标，投资组合等。
i不知道什么是错的，脚本在所有方面都很完美除了Internet Explorer之外的浏览器。它可能是一个IE块。渲染错误。
简而言之，我想要做的就是让它在IE上运行而不用彻底改变脚本（如果可能的话）（因为我几乎可以肯定它） '是一个IE错误，而不是脚本中的错误）
希望我解释正确，我真的不善于解释事情
but i want 4 buttons too be there.
suppose there are four buttons, each brings up a div when clicked, which is closed upon clinking "close" on the div.
There are 4 buttons and 4 divs associated to the content related to each buttons (text, images etc.. in div).
Consider example a button "gallery" brings up a div with image thumbnails.
here the the 4 divs share the global background div and the containing div. only the contents in the containing div are different. so Different divs are placed in the containing div, eg:- gallery, logos, portfolio etc..
i don''t know what''s wrong, the script works perfect in all browsers except internet explorer. Its probably an IE "block" rendering bug.
So in a nutshell, what I''m trying to do is make it work on IE without completely changing the script if possible (because I''m almost sure it''s a IE bug and not a error in script)
hope i explained it correctly, I''m really not good at explaining things
抱歉，我的意思是在单击一个按钮时隐藏div（而不是按钮），这样只有一个div处于阻止状态。另一种可能性是使用style.visibility并将其设置为隐藏和可见而不是使用display属性。
Sorry, I meant hide the divs (rather than buttons) when one button is clicked, so that only one div is in the ''block'' state. One other possibility is to use style.visibility and set that to ''hidden'' and ''visible'' rather than using the display property.
这篇关于问题显示：无/通过JavaScript阻止div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
