tab鼠标移上切换页面
排他思想
对应控制思想
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {margin:0; padding: 0;}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.hd {
height: 45px;
}
.hd span {
display:inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
background-color: skyblue;
}
.bd div {
height: 255px;
background-color: skyblue;
display: none;
}
.bd div.current {
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="hd" id="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bd" id="bd">
<div class="current">我是体育模块</div>
<div>我是娱乐模块</div>
<div>我是新闻模块</div>
<div>我是综合模块</div>
</div>
</div>
<script src="common.js"></script>
<script>
var hd = my$("hd");
var spans = hd.getElementsByTagName("span");
var hd = my$("bd");
var divs = hd.getElementsByTagName("div");
console.log(divs);
for(var i=0;i<spans.length;i++){
//为每个spans设置一个index, 为了后续bd部分可以获取下标 (对应控制思想)
//因为this里没有下标相关的数据
spans[i].index = i;
spans[i].onmouseover = function (){
console.log(this.index);
//排他思想
//排除其他
for(var j=0;j<spans.length;j++){
spans[j].className = "";
divs[j].className = "";
}
//保留自己
this.className = "current";
divs[this.index].className = "current";
};
}
</script>
</body>
</html>
