描述：鼠标经过上方的tab栏，tab栏的底色发生改变，tab栏下方的内容发生改变
实现方式：当鼠标经过tab栏的时候，触发一个javascript的经过的事件，该事件是的tab栏所有的标签的className属性发生变化，使得所有的标签都失去原有的特殊属性，下方的span标签同样失去同样的特殊属性，然后给经过时的标签与对应的span标签添加特殊的属性。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab栏的切换</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: #dbffdd;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 360px;
background-color: #a2a5ff;
text-align: center;
font: 700 150px/360px "simsun";
}
.show {
display: block;
}
.current {
background-color: #a2a5ff;
}
</style>
<body>
<div class="box">
<ul>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<span class="show">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
<script>
//方式1
/*var boxArr = document.getElementsByClassName("box");
for(var i = 0; i<boxArr.length;i++){
fn(boxArr[i]);
}
function fn(ele){
var liArr = ele.getElementsByTagName("li");
var spanArr = ele.getElementsByTagName("span");
for (var i = 0;i<liArr.length;i++){
liArr[i].index = i;
liArr[i].onmouseover = function () {
for (var j = 0;j<liArr.length;j++) {
liArr[j].className="";
spanArr[j].className="";
}
this.className = "current";
spanArr[this.index].className="show";
}
}
}*/
//方式2
var boxArr = document.getElementsByClassName("box");
for (var i = 0;i<boxArr.length;i++){
fn(boxArr[i]);
}
function fn(ele) {
var liArr = ele.getElementsByTagName("li");
var spanArr = ele.getElementsByTagName("span");
for (var i = 0 ;i<liArr.length;i++){
liArr[i].setAttribute("index",i);
liArr[i].onmouseover = function () {
for (var j = 0;j<liArr.length;j++){
liArr[j].removeAttribute("class");
spanArr[j].removeAttribute("class");
}
this.setAttribute("class","current");
spanArr[this.getAttribute("index")].setAttribute("class","show");
}
}
}
</script>