码迷,mamicode.com
首页 > Web开发 > 详细

js制作 选项卡

时间:2016-01-01 18:53:34      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
    #s1 .active{background: red;}
    #s1 div{
        width: 210px;
        height: 200px;
        background: gray;
        border: 1px solid greenyellow;
        display: none;
    }
    </style>
    
    <script>
    window.onload=function(){
        var oDiv=document.getElementById("s1");
        var aBtn=oDiv.getElementsByTagName(‘input‘);
        var aDiv=oDiv.getElementsByTagName(‘div‘);
        for(var i=0;i<aBtn.length;i++){
            aBtn[i].index=i;
            aBtn[i].onmousemove=function(){
                
                for(var i=0;i<aBtn.length;i++){
                    aBtn[i].className=‘‘;
                    aDiv[i].style.display="none";
                }
                this.className=‘active‘;
                aDiv[this.index].style.display="block";
                
                
                
            }
        }
    }
    </script>
    <body>
        <div id="s1">
    <input  class="active" type="button" value="教育"/>
    <input  type="button" value="培训"/>
    <input  type="button" value="招生"/>
    <input type="button" value="出国"/>
    <div  style="display: block;">11</div>
    <div >22</div>
    <div >33</div>
    <div >44</div>
    </div>
    </body>
    

</html>

js制作 选项卡

标签:

原文地址:http://www.cnblogs.com/qq928252089/p/5093492.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!