小白Tab切换特效 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
    #tab{width:400px;}
    #tab ul{list-style:none;overflow:hidden;margin:0px;padding:0px;}
    #tab ul li{float:left;padding 5px 10px;border:1px solid #eee;cursor:pointer;}
    .a{background-color:green;}
    .box{width:100%;height:100px;border:1px solid #eee;}
</style>

<script type="text/javascript">
　　//打开网页就开始程序
window.onload=function(){
　　//得到列表
   var olis=document.getElementsByTagName("li");
　　　　for(var i=0;i<olis.length;i++){
　　　　　　　//标记已指坐标
            olis[i].index=i;
            olis[i].onmouseover=function(){
                for(var j=0;j<olis.length;j++){
　　　　　　　　　　　　//把所有东西都隐藏
                    document.getElementById("box-"+j).style.display="none";
　　　　　　　　　　　　//把所有颜色都变为没被选中的颜色
                    olis[j].className="";
　　　　　　　　　　　　//选中的显示
                    document.getElementById("box-"+this.index).style.display="block";
                    olis[this.index].className="a";
                }
            }
        }
    }
</script>
</head>

<body>快乐
<div id="tab">
    <ul>
        <li class="a">tab1</li>
        <li>tab2</li>
    </ul> 
    <div id="box-c">
        <div class="box" id="box-0">
        第一个tab信息</div>
        <div class="box" id="box-1" style="display:none">
        第二个tab信息</div>
        
    </div>
</div>
</body>

 

主要思路是全部先隐藏起来，在通过nomouseover确定i，通过i坐标显示需要的

posted @ 2016-12-20 17:47  编程的小黄人  阅读(143)  评论(0)    收藏  举报