我试图做的是当用户在一个内容框中关闭收音机盒时，它会显示下一个。当我使用javascript执行此操作时，所有框都在彼此内部并且搞砸了这是我的整个代码，所以你可以看到css等。
<html>
<head>
<style>
html, body {
background-image:initial;
background-repeat-x:initial;
background-repeat-y:initial;
background-repeat:no-repeat;
background-attachment:initial;
background-position:initial initial;
background-position-x:initial;
background-position-y:initial;
background-origin:initial;
background-clip:initial;
background-color:#EEEEEE;
font-family:'Source Sans Pro', sans-serif;
color:#262626;
margin:25px;
}
.texts {
position:relative;
z-index:1;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
-o-border-top-left-radius:5px;
-ms-border-top-left-radius:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
border-top-right-radius:5px;
-o-border-top-right-radius:5px;
-ms-border-top-right-radius:5px;
-moz-border-radius-topright:5px;
-webkit-border-bottom-right-radius:5px;
border-bottom-right-radius:5px;
-o-border-bottom-right-radius:5px;
-ms-border-bottom-right-radius:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-left-radius:5px;
border-bottom-left-radius:5px;
-o-border-bottom-left-radius:5px;
-ms-border-bottom-left-radius:5px;
-moz-border-radius-bottomleft:5px;
width:25%;
font-family:Montserrat, sans-serif;
font-size:14px;
text-align:center;
border:1px solid #818181;
padding:10px;
}
.title {
margin:-10;
background-image:url(images/blue.png);
height:20px;
padding-bottom:10px;
padding-top:6px;
text-align:center;
font-family:Montserrat, sans-serif;
font-size:16px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
-o-border-top-left-radius:5px;
-ms-border-top-left-radius:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
border-top-right-radius:5px;
-o-border-top-right-radius:5px;
-ms-border-top-right-radius:5px;
-moz-border-radius-topright:5px;
}
.button {
background-image:url(images/blue.png);
background-repeat-x:repeat;
background-repeat-y:no-repeat;
background-repeat:repeat-x;
background-attachment:initial;
background-position:initial initial;
background-position-x:initial;
background-position-y:initial;
background-origin:initial;
background-clip:initial;
background-color:#000000;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
-o-border-top-left-radius:5px;
-ms-border-top-left-radius:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
border-top-right-radius:5px;
-o-border-top-right-radius:5px;
-ms-border-top-right-radius:5px;
-moz-border-radius-topright:5px;
-webkit-border-bottom-right-radius:5px;
border-bottom-right-radius:5px;
-o-border-bottom-right-radius:5px;
-ms-border-bottom-right-radius:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-left-radius:5px;
border-bottom-left-radius:5px;
-o-border-bottom-left-radius:5px;
-ms-border-bottom-left-radius:5px;
-moz-border-radius-bottomleft:5px;
color:#F0FFF0;
cursor:pointer;
border:1px solid #0774B9;
padding:8px 35px 8px 35px;
}
.button:hover {
background-image:url(images/blue_hover.png);
background-repeat-x:repeat;
background-repeat-y:no-repeat;
background-repeat:repeat-x;
background-attachment:initial;
background-position:initial initial;
background-position-x:initial;
background-position-y:initial;
background-origin:initial;
background-clip:initial;
background-color:#000000;
}
.button:active {
background-image:url(images/blue_click.png);
background-repeat-x:repeat;
background-repeat-y:no-repeat;
background-repeat:repeat-x;
background-attachment:initial;
background-position:initial initial;
background-position-x:initial;
background-position-y:initial;
background-origin:initial;
background-clip:initial;
background-color:#000000;
}
.label_check {
-webkit-appearance:none;
background-color:#FAFAFA;
box-shadow:rgba(0, 0, 0, 0.046875) 0px 1px 2px, rgba(0, 0, 0, 0.046875) 0px -15px 10px -12px inset;
-webkit-border-top-left-radius:50px;
border-top-left-radius:50px;
-o-border-top-left-radius:50px;
-ms-border-top-left-radius:50px;
-moz-border-radius-topleft:50px;
-webkit-border-top-right-radius:50px;
border-top-right-radius:50px;
-o-border-top-right-radius:50px;
-ms-border-top-right-radius:50px;
-moz-border-radius-topright:50px;
-webkit-border-bottom-right-radius:50px;
border-bottom-right-radius:50px;
-o-border-bottom-right-radius:50px;
-ms-border-bottom-right-radius:50px;
-moz-border-radius-bottomright:50px;
-webkit-border-bottom-left-radius:50px;
border-bottom-left-radius:50px;
-o-border-bottom-left-radius:50px;
-ms-border-bottom-left-radius:50px;
-moz-border-radius-bottomleft:50px;
display:inline-block;
position:relative;
border:1px solid #CACECE;
padding:6px;
}
.label_check:checked {
background-color:#E9ECEE;
color:#99A1A7;
box-shadow:rgba(0, 0, 0, 0.046875) 0px 1px 2px, rgba(0, 0, 0, 0.046875) 0px -15px 10px -12px inset, rgba(255, 255, 255, 0.0976563) 15px 10px -12px inset, rgba(0, 0, 0, 0.0976563) 0px 0px 10px inset;
border:1px solid #ADB8C0;
}
.label_check:checked::after {
content:' ';
width:6px;
height:6px;
-webkit-border-top-left-radius:50px;
border-top-left-radius:50px;
-o-border-top-left-radius:50px;
-ms-border-top-left-radius:50px;
-moz-border-radius-topleft:50px;
-webkit-border-top-right-radius:50px;
border-top-right-radius:50px;
-o-border-top-right-radius:50px;
-ms-border-top-right-radius:50px;
-moz-border-radius-topright:50px;
-webkit-border-bottom-right-radius:50px;
border-bottom-right-radius:50px;
-o-border-bottom-right-radius:50px;
-ms-border-bottom-right-radius:50px;
-moz-border-radius-bottomright:50px;
-webkit-border-bottom-left-radius:50px;
border-bottom-left-radius:50px;
-o-border-bottom-left-radius:50px;
-ms-border-bottom-left-radius:50px;
-moz-border-radius-bottomleft:50px;
position:absolute;
top:3px;
background-image:initial;
background-repeat-x:initial;
background-repeat-y:initial;
background-repeat:no-repeat;
background-attachment:initial;
background-position:initial initial;
background-position-x:initial;
background-position-y:initial;
background-origin:initial;
background-clip:initial;
background-color:#99A1A7;
box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 10px inset;
left:3px;
font-size:32px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="http://fonts.googleapis.com/css?family=Montserrat"
rel="stylesheet" type="text/css">
<title>Frooloo, the free face morphing software</title>
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
</script>
</head>
<body>
<center>
<h1>Logo Here!</h1>
<br>
</center>
<span id="1" style="display: block;">
<div class="texts">
<div class="title">
<strong>Step 1</strong>
<br>
<br>
</div>Press "Allow" when you are asked for access to your camera.
<br>
<label class="label_check">
<input name="sample_check1" id="sample_check1" value="1" type="radio"
nclick="showStuff('3'); />
Done?
</label></div></span>
<br>
<span id=" 2 " style="display: none; "><div class="texts ">
<div class="title " >
<strong>Step 2</strong><br><br>
</div>
Make sure your webcam is facing you and your volume is up, so you can hear the beep to let you know analyzing is done.<br>
<label class="label_check " >
<input name="sample_check2 " id="sample_check2 " value="1
" type="radio " onclick="showStuff( '3'); />Done?</label>
</div>
</span>
<br>
<span id="3" style="display: none;">"
<div class="texts">
<div class="title">
<strong>Step 3</strong>
<br>
<br>
</div>A black dot will appear in the area to the right, stare at that black
dot and DO NOT move your head, the software is analyzing your face. You
can move after you hear a beep. This process will start when you check
the box below.
<br>
<label class="label_check">
<input name="sample_check3" id="sample_check3" value="1" type="radio"
/>Ready?</label>
</div>
</span>
<div class="img">
<img src="images/dot.png" img="" style="position:absolute; left:610px; top:120px; ">
</div>
<script>
$('body').hide();
$('body').fadeIn(1000);
</script>
<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-301801-11");
pageTracker._trackPageview();
</script>
</body>
</html>
以下是执行此操作的代码部分：
<center>
<h1>Logo Here!</h1>
<br>
</center>
<span id="1" style="display: block;">
<div class="texts">
<div class="title">
<strong>Step 1</strong>
<br>
<br>
</div>Press "Allow" when you are asked for access to your camera.
<br>
<label class="label_check">
<input name="sample_check1" id="sample_check1" value="1" type="radio"
onclick="showStuff('2'); />
Done?
</label></div></span>
<br>
<span id=" 2 " style="display: none;
"><div class="texts ">
<div class="title " >
<strong>Step 2</strong><br><br>
</div>
Make sure your webcam is facing you and your volume is up, so you can hear the beep to let you know analyzing is done.<br>
<label class="label_check " >
<input name="sample_check2 " id="sample_check2 " value="1
" type="radio " onclick="showStuff( '3'); />Done?</label>
</div>
</span>
<br>
<span id="3" style="display: none;">"
<div class="texts">
<div class="title">
<strong>Step 3</strong>
<br>
<br>
</div>A black dot will appear in the area to the right, stare at that black
dot and DO NOT move your head, the software is analyzing your face. You
can move after you hear a beep. This process will start when you check
the box below.
<br>
<label class="label_check">
<input name="sample_check3" id="sample_check3" value="1" type="radio"
/>Ready?</label>
</div>
</span>
这是JS函数，
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
</script>
发生了这种情况，请转到此链接查看http://188.165.208.144/~seegee/planz/real/morph.php
有3个内容框在彼此的顶部，但是当我这样做时，就会发生这种情况，是的，那个黑点就在那里......
答案 0 :(得分：1)
ID和NAME令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“ _“），冒号（”：“）和句号（”。“）。
答案 1 :(得分：0)
ID不应以数字开头（请参阅此post）。除此之外，当您使用内联元素（<div>）包装块元素（<span>）时，您可能会遇到各种浏览器的问题。
您的onclick缺少引号：onclick="showStuff('2');应为onclick="showStuff('2');"
答案 2 :(得分：0)
Scrappedcola是对的。
对于你的第二个问题， 有一个额外的报价，因为你有
<span id="a3" style="display: none;">"<div class="texts" >