所以我写了一个简单的流程图，我可能做错了，但它似乎按照我的方式工作，设计明智。代码明智，我似乎做错了什么，它应该显示 4 个元素，h1 和显示您的选项的 3 个 div，当您单击是或否时，它会显示与您相关的其他元素这里的选择是我的标记，我已经通过 http://validator.w3.org/ 运行它它说没问题。
第 150 行说我在 Dreamweaver(我使用的程序)中有语法错误
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
body{background-color:#999}
p{color:#0CF}
h1{
color:#03C;
text-align:center;
}
#q1{
position:absolute;
left:293px;
top:41px;
border:thin black solid;
background-color:#9CF;
width: 531px;
height: 72px;
font-size:64px
}
#q2{
position:absolute;
left:424px;
top:257px;
border:thin black solid;
background-color:#9CF;
width: 62px;
height: 54px;
font-size:48px;
}
#q3{
position:absolute;
left:633px;
top:405px;
border:thin black solid;
background-color:#9CF;
width: 186px;
height: 39px;
font-size:32px
}
#q4{
position:absolute;
left:494px;
top:145px;
border:thin black solid;
background-color:#9CF;
width: 100px;
height: 165px;
font-size:36px
}
#q5{
position:absolute;
left:633px;
top:255px;
border:thin black solid;
background-color:#9CF;
width: 74px;
height: 55px;
font-size:48px;
}
#q6{
position:absolute;
left:573px;
top:407px;
border:thin black solid;
background-color:#9CF;
width: 50px;
height: 39px;
font-size: 36px
}
#q7{
position:absolute;
left:240px;
top:404px;
border:thin black solid;
background-color:#9CF;
width: 246px;
height: 41px;
font-size:36px;
}
#q8{
position:absolute;
left:671px;
top:317px;
border:thin black solid;
background-color:#000;
width: 2px;
height: 82px;
}
#q11{
position:absolute;
left:854px;
top:453px;
border:thin black solid;
background-color:#000;
width: 5px;
height: 59px;
font-size:36px;
}
#q12{
position:absolute;
left:449px;
top:319px;
border:thin black solid;
background-color:#000;
width: 4px;
height: 78px;
font-size:36px;
}
#q13{
position:absolute;
left:551px;
top:519px;
border:thin black solid;
background-color:#9CF;
width: 371px;
height: 44px;
font-size:36px;
}
#q14{
position:absolute;
left:826px;
top:401px;
border:thin black solid;
background-color:#9CF;
width: 61px;
height: 44px;
font-size:36px;
}
#q15{
position:absolute;
left:602px;
top:454px;
border:thin black solid;
background-color:#000;
width: 5px;
height: 57px;
font-size:36px;
}
.hidden{
visibility:hidden
}
</style>
<script>
function show (x) {
var a=document.getElementById(x)
a.style.visiblity.visible
</script>
</head>
<!-- ADD IDS TO HIDDEN CLASSES, MAKE FUNCTION TO SHOW THEM ON NON-HIDDEN ELEMENTS -->
<body>
<div id="q1">Should You Worry?</div>
<div id="q2" onClick="show('q7')">No</div>
<div id="q3" class="hidden" >Can you fix it?</div>
<div id="q4"> Do you have a problem?</div>
<div id="q5" onClick="show('q3,q6,q14')">Yes</div>
<div id="q6" class="hidden" onClick="show('q13')">No</div>
<div id="q7" class="hidden">Then don't worry</div>
<div id="q8" class="hidden"></div>
<div id="q11" class="hidden"></div>
<div id="q12" class="hidden"></div>
<div id="q13" class="hidden">Then don't worry about it!</div>
<div id="q14" class="hidden" onClick="show('q13')">Yes</div>
<div id="q15" class="hidden"></div>
</body>
</html>
最佳答案
show() 需要像这样:
function show(x) {
var a=document.getElementById(x);
a.style.visibility = "visible";
}
你必须设置 visibility一个值，可以是下面的[1] :
- 隐藏
- 可见
- 收起
- 继承
当您使用 a.style.visibility.visible 时，您正在尝试访问不存在的“可见性”内的“可见”属性。有关样式属性所含内容的完整信息，请打开 firebug/devtools 并写入 document.getElementById('xxx').style; (其中 xxx 是一个元素的 id)在控制台上，它将列出样式中的所有属性(所有属性都显示为字符串)。
有关更多信息，请阅读 MDN HTMLElement.style
您应该注意的一件事是 show('q3,q6,q14')正在尝试 document.getElementById('q3,q6,q14')不存在(寻找类似 <element id="q3,q6,q14"> 的东西)。对于该用途:
<div id="q5" onClick="show('q3');show('q6');show('q14');">Yes</div>
或者您可以更改 show()更新的东西(但代价是 does not support IE7 ):
function show(x) {
var a=document.querySelectorAll(x);
for(var i=0;i<a.length;i++){
a[i].style.visibility = "visible";
}
}
与 CSS 选择器一起使用，然后接受 , :
<div id="q5" onClick="show('#q3,#q6,#q14');">Yes</div>
如需支持IE7以下，Sergio's answer就足够了。
关于单击时的 Javascript 未显示应有的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18991297/