JS实现鼠标滑过的Tab选项卡切换

原创 437396649 随笔 JS 250阅读 2017-12-11 21:22:28 举报

<!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>
*{ padding:0px;
font-size:12px;
list-style:none;
margin:0px;}
.notice{width:298px;
height:98px;
margin:10px;
border:1px solid #eee;
overflow:hidden
}
.notice-tit{height:27px;
position:relative;
}
.notice-tit ul{
position:absolute;
width:301px;
left:-1px
}
.notice-tit li{
float:left;
width:58px;
height:26px;
line-height:26px;
text-align:center;
overflow:hidden;
background:#fff;
border-bottom:1px solid #eee;
padding:0 1px;
background:#f7f7f7;
}
.notice-tit li a{text-decoration:none;
color:#000;}
.notice-tit li a:hover{color:#f90;}
.notice-tit li.select{background:#fff;
border-bottom:#fff;
border-left:1px solid #eee;
border-right:1px solid #eee;
padding:0px;
font-weight:bold;}
.notice-con p{text-align:center;
font-size:20px;
line-height:72px;
}
</style>

<script>
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
var titles=$('notice-tit').getElementsByTagName('li'),
ps=document.getElementsByTagName('p');
if(titles.length!=ps.length)
return; //只有当标题数量和内容数量一致时可进行
for(var i=0;i<titles.length;i++){
titles[i].id=i; //为了找出标题所对应的内容
titles[i].onmouseover=function(){
for(var j=0;j<titles.length;j++){
titles[j].className='';
ps[j].style.display='none';//清空操作
}
this.className='select';
ps[this.id].style.display='block';//鼠标滑过时改变类名和属性
}
}
}
</script>
</head>

<body>
<div class="notice" id="notice">
<div class="notice-tit" id="notice-tit">
<ul>
<li class="select"><a href="#">首页</a></li>
<li><a href="#">第二页</a></li>
<li><a href="#">第三页</a></li>
<li><a href="#">第四页</a></li>
<li><a href="#">第五页</a></li>
</ul>
</div>
<div id="notice-con" class="notice-con">
<p>首页的内容</p>
<p style="display:none">第二页的内容</p>
<p style="display:none">第三页的内容</p>
<p style="display:none">第四页的内容</p>
<p style="display:none">第五页的内容</p>
</div>
</div>
</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复