html切换面板

来源：互联网发布：好看的网络剧青春校园编辑：程序博客网时间：2024/05/16 04:44
切换面板
自动切换手动切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>ul{    list-style-type:none;    margin:0;}#biaoqian li{    display:block;    float:left;    border-radius:5px;    padding:4px;    margin:2px;    background:#00F;    cursor:pointer;}#tab{    width:200px;    height:40px;    position:absolute;    left:70px;    top:52px;}#biaoqian .act{    display:block;    float:left;    border-radius:5px;    padding:4px;    margin:2px;    background:#F00;    }    p{        border:1px #333 solid;    }</style><script>function aa(){    tab("biaoqian","li","tab","div");    function tab(a,b,c,d,evt){        var aa=document.getElementById(a);        var aaa=aa.getElementsByTagName(b);        var cc=document.getElementById(c);        var ccc=cc.getElementsByTagName(d);        var len=aaa.length;        var i=j=0;        var index=0;        var timer=null;        for(i=0;i<len;i++){            aaa[i].id=i;            aaa[i].onmouseover=function(){                clearTimeout(timer);                change(this.id);                index=this.id;            }            aaa[i].onmouseout=function(){             timer=setInterval(zengjia,2000);             //index=this.id;            }        }                //setTimeout(function(){*/            if(timer){                clearInterval(timer);                timer=null;            }            timer=setInterval(zengjia,2000);                function zengjia(){                    index++;                    if(index>=len){                        index=0;                    }                    change(index);                }        function change(curindex){                for(j=0;j<len;j++){                    aaa[j].className='';                    ccc[j].style.display="none";                }                aaa[curindex].className='act';                ccc[curindex].style.display="block";        }    }    }</script></head><body onload="aa()"><div style="width:280px; height:30px"><ul id="biaoqian"><li class="act">选项1</li><li>选项2</li><li>选项3</li></ul></div>    <div id="tab">    <div>内容1</div>    <div class="hide">内容2</div>    <div class="hide">内容3</div>  </div>  <p></p>  <p>fsafasfasf<p></body></html>
0 0