JavaScript的第三个作业，选项卡。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            window.onload=function(){
                var oDiv=document.getElementById('div1');
                var bDiv=oDiv.getElementsByTagName('input');
                var cDiv=oDiv.getElementsByTagName('div');
                for(var i=0;i<bDiv.length;i++){
                    bDiv[i].index=i;
                    bDiv[i].onclick=function(){
                        for(var i=0;i<bDiv.length;i++)
                        {
                            bDiv[i].className='';
                            cDiv[i].style.display='none';
                        }
                        this.className='active';
                        cDiv[this.index].style.display='block';
                    };
                }
            }
        </script>
        <style>
            #div1 .input{ float: left;}
            #div1>div{ border: solid 1px #008000 ; width: 100px; height: 150px; display: none;}
            .active{background-color: yellow;}
        </style>
    </head>
    <body>
        <div id="div1">
            <input type="button" value="数学" class="active"/>
            <input type="button" value="语文" />
            <input type="button" value="英语" />
            <input type="button" value="科学" />
            <div style="display: block;">我是数学</div>
            <div>我是语文</div>
            <div>我是英语</div>
            <div>我是科学</div>
        </div>
    </body>
</html>

这是比较常见的选项卡的一个例子

这个作业浪费时间很长

做这个作业之前一定要先理解各个函数之间的逻辑关系

bDiv[i].index=i;是个重点

要知其所以然

这个作业不是做得特别好

是多次的修改才做成的

所以这个页面还是要多做几遍的

posted @ 2015-10-15 17:22  路途遥远勿忘初心  阅读(174)  评论(0)  编辑  收藏  举报