<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
.box{width: 398px;height: 298px;border: 1px solid red;position: relative;top: 100px;left: 450px}
}
.box ul{width: 398px;height: 60px;}
.box ul li{list-style: none;float: left;width: 98.7px;height: 60px;line-height: 60px;text-align: center;border-right: 1px solid red;border-bottom: 1px solid red}
.box ul li:nth-child(4){border-right: none;}
.box .content{width: 398px;height: 236px;position: absolute;top: 62px;text-align: center;line-height: 236px}
.box ul li.a{border-bottom: none;}
.box .content div{width: 398px;height: 236px;display: none;}
.box .content div.sel{display: block;}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="a">充话费</li>
<li>旅行</li>
<li>车险</li>
<li>游戏</li>
</ul>
<div class="content">
<div class="sel">aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
</div>
</div>
<script type="text/javascript">
var index=0;//保存当前被选中的li的索引 默认第一个被选中
var lis=document.getElementsByTagName("ul")[0].getElementsByTagName("li");//获取所有的li集合
var c=document.getElementsByClassName("content")[0].getElementsByTagName("div");
// console.log(c);
// 给每个li添加鼠标经过事件
for(var i=0;i<lis.length;i++){
lis[i]._index=i;//新增属性，保存索引
//添加鼠标进过事件
lis[i].onmouseover=function(){
//上一个被选中的祛除样式
lis[index].className="";
c[index].className="";
this.className="a";//当前被选中的添加样式
c[this._index].className="sel";
index=this._index;//修改索引
}
}
</script>
</body>
</html>
485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
