js使用排他思想实现导航栏的切换

导航栏的切换

html代码如下:

<div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div>

css样式:
<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: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 360px;
background-color: yellow;
text-align: center;
font: 700 150px/360px "simsun";
}
.show {
display: block;
}
.curren
4000
t {
background-color: yellow;
}
</style>

js代码如下:
<script>
//首先获取所有的li
var box = document.getElementsByClassName("box");
//循环调用函数 有几个box,调用几次 互不影响
for(var i = 0;i<box.length;i++){
fn(box[i]);
}
function fn(ele){
var liArr = ele.getElementsByTagName("li");
var spanArr = ele.getElementsByTagName("span");
for(var i = 0;i < liArr.length;i++){
//为每个li绑定索引值
liArr[i].index = i;
liArr[i].onmouseover = function(){
//为所有的li标签添加鼠标移入事件 排他思想，干掉所有人，设置自己
for(var j = 0;j<liArr.length;j++){
liArr[j].className = "";
spanArr[j].className = "";
}
//设置当前鼠标移入的类名为current
this.className = "current";
//设置当前的索引值所对应的span标签的类名为show
spanArr[this.index].className = "show";
}
}
}
</script>
排他思想:
干掉所有人，设置我自己，先将所有人全设置为"",然后再设置当前的值

运行结果如下: