<style>
* {
margin: 0;
padding: 0;
}
.dv {
width: 399px;
height: 300px;
background-color: yellow;
margin: 200px auto;
/*overflow: hidden;*/
}
.hd {
height: 45px;
background-color: skyblue;
line-height: 45px;
}
.hd span {
display: inline-block;
height: 45px;
width: 96px;
text-align: center;;
cursor: pointer;
}
.hd .current {
background-color: yellow;
}
.bd li {
list-style: none;
height: 255px;
/*background-color: yellow;*/
display: none;
}
.bd .current {
display: block;
}
</style>
</head>
<body>
<div class="dv" id="box">
<div class="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bd">
<ul>
<li class="current">我是体育模块</li>
<li>我是娱乐模块</li>
<li>我是新闻模块</li>
<li>我是综合模块</li>
</ul>
</div>
</div>
<script src="common.js"></script>
<script>
//先获取最外层div
var box = my$("box");
//获取hd
var hd = box.getElementsByTagName("div")[0];
//获取bd
var bd = box.getElementsByTagName("div")[1];
//获取所有的list
var list = bd.getElementsByTagName("li");
//获取所有的span
var spanObjs = hd.getElementsByTagName("span");
//遍历span
for (var i = 0; i < spanObjs.length; i++) {
//自定义属性将索引保存在span中
spanObjs[i].setAttribute("index", i);
//为span注册鼠标进入事件
spanObjs[i].onmouseover = function () {
for (var j = 0; j < spanObjs.length; j++) {
//移除所有span的类属性
spanObjs[j].removeAttribute("class");
}
//将当前对象的类属性设置为current
this.className = "current";
//获取索引值
var num = this.getAttribute("index");
//遍历li
for (var k = 0; k < list.length; k++) {
//移除li里所有的类属性
list[k].removeAttribute("class");
}
//将当前对象的类属型设置为current
list[num].className = "current";
};
}
</script>
</body>
tab切换
最新推荐文章于 2023-05-29 11:58:59 发布