直接上个效果图看看
说白其实就是利用for循环把元素样式清除，再利用自定义属性 给当前的元素加上属性，同时把相对应的内用显示出来。
再来看看代码也许你会明白（2018-03-30的作业）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端学习直通车</title>
<style type="text/css">
*{
margin: 0;padding: 0;
list-style: none;
text-decoration: none;
color:#666;
}
h1{
width: 100%;
text-align: center;
line-height: 3em;
}
.box{
width: 400px;
height: 150px;
border: 1px solid #666;
margin: 10px auto
}
.box > ul{
width: 100%;
height: 40px;
background-color: #ccc;
border-bottom: 1px solid #666;
}
.box > ul li{
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
color: #000;
float: left;
border-right: 1px solid #666;
}
.box span{
float: right;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
color: #000;
margin-top: -40px;
}
.active{
background-color: #fff;
}
.box div{
padding: 10px;
line-height: 2em;
display: none;
}
.box div ul li:hover a{
color: #000;
}
</style>
</head>
<body>
<h1>前端学习直通车</h1>
<div class="box">
<ul>
<li class="active">html</li>
<li>css</li>
<li>javascript</li>
</ul>
<span><a href="http://www.php.cn">更多</a></span>
<div style="display: block;">
<ul>
<li> <a href="http://www.php.cn/course/889.html">从零开始构建HTML页面</a></li>
<li> <a href="http://www.php.cn/course/880.html">2018前端入门_HTML5</a></li>
<li> <a href="http://www.php.cn/course/874.html">30分钟学会网站布局</a></li>
</ul>
</div>
<div>
<ul>
<li> <a href="http://www.php.cn/course/893.html">CSS视频教程-玉女心经版</a></li>
<li> <a href="http://www.php.cn/course/890.html">CSS的美化功能</a></li>
<li> <a href="http://www.php.cn/manual/view/32891.html">CSS 4.2.4参考手册</a></li>
</ul>
</div>
<div>
<ul>
<li> <a href="http://www.php.cn/course/803.html">JavaScript基础入门及设计模式视频教程</a></li>
<li> <a href="http://www.php.cn/course/802.html">JavaScript设计模式完整视频教程</a></li>
<li> <a href="http://www.php.cn/course/795.html">js高级面向对象和组件开发视频教程</a></li>
</ul>
</div>
</div>
<script>
var oBox=document.getElementsByClassName('box')[0]
var ul=oBox.getElementsByTagName('ul')[0]
var tab=ul.getElementsByTagName('li')
var oDiv=oBox.getElementsByTagName('div')
for (var i = 0; i < tab.length; i++) {
tab[i].index=i
tab[i].onmouseover=function(){
for (var i = 0; i < tab.length; i++){
tab[i].className=''
oDiv[i].style.display='none'
}
this.className='active'
oDiv[this.index].style.display='block'
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
