<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*不是类名就不用.*/
*{
padding: 0;
margin: 0;
list-style-type: none;
text-decoration: none;
}
.box ul{
width: 400px;
height:50px;
margin-top: 30px;
margin-left: 50px;
}
.box ul li{
padding-left: 10px;
padding-right: 10px;
height:18px;
line-height:18px;
display:inline-block;
}
.box ul li:hover{
border-top:2px solid transparent;
background-color:lightgoldenrodyellow;
}
.box ul li .click{
border-top:2px cadetblue solid;
background-color:#fff;
border:1px #000000 solid;
}
.box ul li a{
color:#000;
font-size:10px;
}
.box ul li a:hover{
border-top:2px cadetblue solid;
}
.con{
width: 200px;
height:420px;
margin-left: 60px;
}
.con div{
width: 200px;
height:70px;
background:#ccc;
display:none;
margin-top: 10px;
}
.con .list{
display:block;
}
.con div{
display: none;
}
#hezi{
text-align: center;
}
.clearfix:after{
content: "";
clear:both;
display:block;
}
</style>
</head>
<body>
<!--先设定简单的导航-->
<!--注意是否获取的问题-->
<div class="box clearfix">
<ul id="list">
<li class="click"><a href=" ">深</a ></li>
<!--给li加类名：目的是需要点击时他们都会变成2px的蓝色上边框-->
<li><a href="#">深</a ></li>
<li><a href="#">深</a ></li>
<li><a href="#">深</a ></li>
<li><a href="#">深</a ></li>
<li><a href="#">深</a ></li>
</ul>
</div>
<div class="con" id="listshow">
<!--必须把六个div都包含在一个大的盒子里-->
<!--样式中设置间距，且设置display:block-->
<div class="list">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<script type="text/javascript">
var oUl=document.getElementById("list")
//获取大的ul,设置id(点击每一个li时，出现相应的内容)
//()里面对应它的id名
var oLi=oUl.getElementsByTagName("li")
//获取所有ul下的div,因为页面中涉及li的有许多，
// 这种写法是为了便于区分
var oDox=document.getElementById("listshow")
