js tab切换

window.onload = function(){
// 抓取li元素
var Li = document.getElementsByTagName('li')

// 抓取content元素
var cont =document.getElementsByClassName('content')

// 遍历li元素
for(var i=0;i<Li.length;i++){
// 把li标签的序号值存起来
Li[i].xh = i;
// 给每个li标签添加鼠标移入事件
Li[i].onmouseover = function(){
// 遍历所有的content元素让所有的content元素隐藏 
for(var b=0;b<cont.length;b++){
//让所有cont隐藏
cont[b].style.display='none'
//让当前的cont显示
cont[this.xh].style.display='block'
}
//让当前的li显示
Li[this.xh].style.display= 'block'

}
}

}

///

<div id="box">
<ul>
<li style="background: red;">红色</li>
<li style="background: yellow;">黄色</li>
<li style="background: blue;">蓝色</li>
</ul>
<div class="con">
<div class="content" style="background: red;">

</div>
<div class="content"style="background: yellow;">

</div>
<div class="content" style="background: blue;">

</div>

</div>
</div>

*{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
#box{
width: 600px;
height: 600px;
border: 2px solid black;
margin: 0px auto;
margin-top: 50px;
}

li{
width: 200px;
height: 50px;
float: left;
font-size: 30px;
line-height: 50px;
text-align: center;
color: white;

}
ul{
overflow: hidden;
}
.con{
width: 550px;
height: 500px;
border: 2px solid purple;
margin: 0px auto;
margin-top: 20px;
position: relative;
}
.content{
position: absolute;
width: 550px;
height: 500px;
}