您的位置：首页 > Web前端 > HTML

html切换面板

2015-08-18 11:22 495 查看

切换面板

自动切换手动切换

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 切换面板选项卡

相关文章推荐

新的分享

章节导航