代碼如下，只有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';
}
}
