HTML 显示/隐藏元素 JS 不起作用
HTML show/hide elements JS not working
im试图做的是，当用户在一个内容框中选中单选框时，它将显示下一个。当我使用 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 个内容框彼此重叠，但当我这样做时，就会发生这种情况，是的，那个黑点应该在那里......
ID 和
NAME 标记必须以字母 （[A-Za-z]） 开头，后跟任意数量的字母、数字 （[0-9]）、连字符 （"-"）、下划线 （"_"）、冒号 （"："） 和句点 （"."）。
Id 不应该以数字开头（见这篇文章）。除此之外，当您使用内联元素（<span>）包装块元素（<div>）时，您可能会遇到各种浏览器的问题。
您的点击缺少引号：onclick="showStuff('2');应该onclick="showStuff('2');"
Scrappedcola 是对的。
对于你的第二个问题，有一个额外的报价，因为你有
<span id="a3" style="display: none;">"<div class="texts" >
相关文章：
- 预编译的JSX React，js不起作用
- Backbone.js 不起作用，而 Underscore、JSON 和 jQuery 可以
- HTML 显示/隐藏元素 JS 不起作用
- 为什么这个JS不起作用
- 主干上的无限滚动/分页.js不起作用
- AngularJs 和时刻.js不起作用
- 为什么图像选择器程序中的这个函数 js 不起作用
- EasyPieChart.js不起作用
- Int Array Django 通过上下文传递到 JS 不起作用
- tty.js不起作用
- 三元操作 JS 不起作用
- Rails 4 - 没有JavaScript错误，但JS不起作用
- 无法加载高图.js和高图.js(地图.js不起作用）
- 刻字.js不起作用
- 幻灯片.js不起作用
- 在我更改我的 .htaccess 后，我的 Css An Js 不起作用
- 可排序.js不起作用:列表项不可拖动
- 在视图源代码中阻碍 Js 不起作用
- 角度JS不起作用
- 推特引导程序 - JS不起作用
