js 选项卡实现

最新推荐文章于 2020-03-26 15:04:11 发布

anni_hf

最新推荐文章于 2020-03-26 15:04:11 发布

阅读量252

点赞数 1

文章标签： javascript html css

本文链接：https://blog.csdn.net/anni_hf/article/details/39641579

版权

一、效果图如下

鼠标移动到第几个标签，跟随显示第几个标签页

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>鼠标滑过选项卡效果</title>

<style>
*{margin:0;padding:0;list-style:none;font-size:12px;}
.notice{
width:298px;
height:98px;
margin:10px;
border:1px solid #eee;
overflow:hidden;
}
.notice-tit{
height:27px;
position:relative;
background-color:#F7F7F7;
}
.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;
padding:0 1px;
background-color:#F7F7F7;
border-bottom:1px solid #eee;
}
.notice-tit li.select{
background:#FFF;
border-bottom-color:#fff;
border-left:1px solid #eee;
border-right:1px solid #eee;
padding:0;
font-weight:bolder;
}
.notice li a:link,.notice li a:visited{
text-decoration:none;
color:#000;
}
.notice li a:hover{
color:#f90;
}
.notice-con .mod{
margin:10px 10px 10px 19px;
}
.notice-con .mod ul li{float:left;width:134px;height:25px;overflow:hidden;}
</style>
<script type="text/javascript">
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
window.οnlοad=function(){
//获取鼠标滑过或点击的标签和要切换内容的元素
var titles=$('notice-tit').getElementsByTagName('li'),
divs=$('notice-con').getElementsByTagName('div');
if(titles.length!=divs.length) return;
//遍历titles下的所有li
for(var i=0,l=titles.length;i<l;i++){
titles[i].id=i;
titles[i].οnmοuseοver=function(){
//清楚li上的class
for(var j=0;j<l;j++){
titles[j].className="";
divs[j].style.display="none";
}
//设置当前为高亮显示
this.className='select';
divs[this.id].style.display="block";
}
}
}
</script>
</head>
<body>
<div id="notice" class="notice">
<div id="notice-tit" class="notice-tit">
<ul>
<li><a href="#">页一</a></li>
<li><a href="#">页二</a></li>
<li><a href="#">页三</a></li>
<li><a href="#">页四</a></li>
<li class="select"><a href="#">页五</a></li>
</ul>
</div>
<div id="notice-con" class="notice-con">
<div class="mod" style="display:none;">
<ul>
<li><a href="#">标签页1-1</a></li>
<li><a href="#">标签页1-2</a></li>
<li><a href="#">标签页1-3</a></li>
<li><a href="#">标签页1-4</a></li>
</ul>
</div>
<div class="mod" style="display:none;">
<ul>
<li><a href="#">标签页2-1</a></li>
<li><a href="#">标签页2-2</a></li>
<li><a href="#">标签页2-3</a></li>
<li><a href="#">标签页2-4</a></li>
</ul>
</div>
<div class="mod" style="display:none;">
<ul>
<li><a href="#">标签页3-1</a></li>
<li><a href="#">标签页3-2</a></li>
<li><a href="#">标签页3-3</a></li>
<li><a href="#">标签页3-4</a></li>
</ul>
</div>
<div class="mod" style="display:none;">
<ul>
<li><a href="#">标签页4-1</a></li>
<li><a href="#">标签页4-2</a></li>
<li><a href="#">标签页4-3</a></li>
<li><a href="#">标签页4-4</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">标签页5-1</a></li>
<li><a href="#">标签页5-2</a></li>
<li><a href="#">标签页5-3</a></li>
<li><a href="#">标签页5-4</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>