课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

来源：5-1 JavaScript控制引导单元的显示

LeoLiu_0001

2014-10-14 02:37

/**
 * 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 父框 第一个单元显示出来
    oMask.style.display=oSearch.style.display=oStep[0].style.display='block';

    //下一步按钮
    for(var i=0;i<oStep.length;i++){
        oA[i].index=i;//为每一个按钮怎加一个index的属性，为后面的引用
        oA[i].onclick=function(){
            this.parentNode.style.display="none";
            aStep[this.index+1].style.display="block";
        }
    }
}

//请教  做到这一步的时候。 只关闭第一个单元，之后的单元打不开。浏览器都试了 都不行，代码查了即便 不知道什么原因。。

chrome 审查 提示Uncaught ReferenceError: aStep is not defined。

 

求解答，谢谢了

写回答 关注

2回答

  • 万般浮云
    2018-09-19 00:28:35

    <!DOCTYPE html>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <style>

    *{ margin:0; padding:0}

    html{ height:100%}

    body{ background:url(http://img.mukewang.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://img.mukewang.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://img.mukewang.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://img.mukewang.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://img.mukewang.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://img.mukewang.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 父框 第一个单元显示出来

    oMask.style.display=oSearch.style.display=oStep[0].style.display='block';


    //下一步按钮

    for(var i=0;i<oStep.length;i++){

    oA[i].index=i;//为每一个按钮怎加一个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";

    }

    }

    }

    //关闭按钮

    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="关闭">关闭</span></div>

        <div class="stepB"><a>下一步</a><span title="关闭">关闭</span></div>

        <div class="stepC"><a>下一步</a><span title="关闭">关闭</span></div>

        <div class="stepD"><a>下一步</a><span title="关闭">关闭</span></div>

        <div class="stepE"><a>下一步</a></div>

    </div>

    </body>

    </html>


    0 0
  • 素素陈
    2015-10-09 14:23:09

    var oStep=oSearch.getElementsByTagName('div');你这里定义的是“oStep”不是“aStep”

    0 1

如何实现“新手引导”效果

学会用 原生JavaScript代码和JQuery两种方式实现依次显示效果

46298 学习 · 184 问题

查看课程
打开慕课网App查看更多内容