/**
?* Created by lc on 2014/10/14.
?*/
window.onload=function(){
??? var oMask=document.getElementById('mask');
??? var oSearch=document.getElementById('searchTip');
??? var oStep=oSearch.getElementsByTagName('div');
??? var oA=oSearch.getElementsByTagName('a');
??? var oClose=oSearch.getElementsByTagName('span');
??? //mask 父框 第一個(gè)單元顯示出來
??? oMask.style.display=oSearch.style.display=oStep[0].style.display='block';
??? //下一步按鈕
??? for(var i=0;i<oStep.length;i++){
??????? oA[i].index=i;//為每一個(gè)按鈕怎加一個(gè)index的屬性，為后面的引用
??????? oA[i].onclick=function(){
??????????? this.parentNode.style.display="none";
??????????? aStep[this.index+1].style.display="block";
??????? }
??? }
}
//請(qǐng)教? 做到這一步的時(shí)候。 只關(guān)閉第一個(gè)單元，之后的單元打不開。瀏覽器都試了 都不行，代碼查了即便 不知道什么原因。。
chrome 審查 提示Uncaught ReferenceError: aStep is not defined。
?
求解答，謝謝了
2018-09-19
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style>
*{ margin:0; padding:0}
html{ height:100%}
body{ background:url(http://img1.sycdn.imooc.com//538d971400016dbd16191694.jpg) center top; height:100%}
#mask{ height:100%; width:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); position:absolute; left:0; top:0;display:none;}
#searchTip{ width:980px; height:800px; position:absolute; left:50%; margin-left:-490px;}
#searchTip div{ position:absolute; display:none }
#searchTip div a{ position:absolute;width:96px; height:32px; cursor:pointer;text-indent:-999px; overflow:hidden}
#searchTip div span{cursor:pointer; position:absolute; width:30px; height:30px;text-indent:-999px; overflow:hidden}
.stepA{ background:url(http://img1.sycdn.imooc.com//538d974000011bda07450329.jpg); height:329px; width:745px; top:130px; left:-9px; display:block}
.stepA a{top:230px; left:490px; }
.stepA span{ top:143px; right:32px; }
.stepB{ background:url(http://img1.sycdn.imooc.com//538d975f00017e8d06470405.jpg); width:647px; height:405px;top:2px; left:324px}
.stepB a{top:308px; left:146px;}
.stepB span{ top:196px; right:285px; }
.stepC{ background:url(http://img1.sycdn.imooc.com//538d977c0001ef5f06540257.jpg); width:654px; height:257px;top:294px; left:318px}
.stepC a{top:155px; left:400px; }
.stepC span{ top:44px; right:35px; }
.stepD{ background:url(http://img1.sycdn.imooc.com//538d97990001692305580348.jpg); width:558px; height:348px;top:78px; left:155px}
.stepD a{top:246px; left:304px;}
.stepD span{ top:135px; right:35px; }
.stepE{ background:url(http://img1.sycdn.imooc.com//538d97b70001f47d03970342.jpg); width:397px; height:342px;top:79px; left:250px}
.stepE a{top:245px; left:153px;}
</style>
<script>
window.onload=function(){
var oMask=document.getElementById('mask');
var oSearch=document.getElementById('searchTip');
var oStep=oSearch.getElementsByTagName('div');
var oA=oSearch.getElementsByTagName('a');
var oClose=oSearch.getElementsByTagName('span');
//mask 父框 第一個(gè)單元顯示出來
oMask.style.display=oSearch.style.display=oStep[0].style.display='block';
//下一步按鈕
for(var i=0;i<oStep.length;i++){
oA[i].index=i;//為每一個(gè)按鈕怎加一個(gè)index的屬性，為后面的引用
oA[i].onclick=function(){
this.parentNode.style.display="none";
if(this.index < oStep.length-1) {
oStep[this.index+1].style.display="block";
} else if(this.index == oStep.length-1) {
oMask.style.display=oSearch.style.display="none";
}
}
}
//關(guān)閉按鈕
for(var i=0;i<oClose.length;i++){
oClose[i].onclick=function() {
oMask.style.display=oSearch.style.display="none";
}
}
}
</script>
</head>
<body>
<div id="mask"></div>
<div id="searchTip">
? ? <div class="stepA"><a>下一步</a><span title="關(guān)閉">關(guān)閉</span></div>
? ? <div class="stepB"><a>下一步</a><span title="關(guān)閉">關(guān)閉</span></div>
? ? <div class="stepC"><a>下一步</a><span title="關(guān)閉">關(guān)閉</span></div>
? ? <div class="stepD"><a>下一步</a><span title="關(guān)閉">關(guān)閉</span></div>
? ? <div class="stepE"><a>下一步</a></div>
</div>
</body>
</html>
2015-10-09
var oStep=oSearch.getElementsByTagName('div');你這里定義的是“oStep”不是“aStep”