<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
list-style:none;
}
.OneBox ul{
width:600px;
background:#33344A;
}
.OneBox ul li{
float:left;
height:60px;
line-height:60px;
transition:0.3s;
width:100px;
text-align:center;
color: #717181;
}
.TwoBox ul li{
position: absolute;
transition: 0.3s;
padding: 30px;
font-family: "微软雅黑";
font-size: 21px;
width: 600px;
height: 10px;
}
a{
text-decoration:none;
color: #717181;
}
.show{
opacity: 1;
}
.hide{
opacity: 0;
}
.ys{
background: #e74c3c;
}
</style>
<script type="text/javascript">
window.onload=function(){
var OneLi = document.getElementsByClassName('OneBox')[0].getElementsByTagName('li');
var TwoLi = document.getElementsByClassName('TwoBox')[0].getElementsByTagName('li');
var liA = document.getElementsByClassName('OneBox')[0].getElementsByTagName('a');
OneLi[0].className='ys';
liA[0].style.color="white";
for (var i = 0; i < OneLi.length; i++) {
OneLi[i].index=i;
OneLi[i].onmouseover=function(){
var num = parseInt(this.index);
for (var j = 0; j < OneLi.length; j++) {
OneLi[j].className='';
liA[j].style.color='';
TwoLi[j].className='hide';
}
OneLi[num].className='ys';
liA[num].style.color='white';
TwoLi[num].className='show';
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="OneBox">
<ul>
<li><a href="javascript:void(0);">新闻</a></li>
<li><a href="javascript:void(0);">综艺</a></li>
<li><a href="javascript:;">娱乐</a></li>
<li><a href="javascript:;">购物</a></li>
<div style="clear:both"></div>
</ul>
</div>
<div class="TwoBox">
<ul>
<li class="show">新闻内容</li>
<li class="hide">综艺内容</li>
<li class="hide">娱乐内容</li>
<li class="hide">购物内容</li>
</ul>
</div>
</div>
</body>
</html>
自动轮播参考 原生js三种选项卡效果(轮播)