代码如下，只有html文件和js文件，复制过去直接用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
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: red;
}
.bd div{
height: 255px;
background-color: red;
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>我是体育模块</div>
<div>我是娱乐模块</div>
<div>我是新闻模块</div>
<div>我是综合模块</div>
</div>
</div>
<script src="./new_file.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
JS文件
var spans = document.querySelectorAll('#hd span');
var divs = document.querySelectorAll('#bd div');
var i = 0 ; len = spans.length;
for(; i < len ; i++){
var span = spans[i];
// 记录索引以便切换上面标签同时切换下面的div
span.setAttribute('suoyin',i);
span.onmouseover = function(){
for(i = 0 ; i < len ; i++){
spans[i].className = '';
}
this.className = 'current';
// 得到的suoyin是个字符串,转化为数字
var suoyin =parseInt(this.getAttribute('suoyin')) ;
var divlen = divs.length;
for(i = 0 ; i < divlen ; i++){
divs[i].className = '';
}
divs[suoyin].className = 'current';
}
}
