<style type="text/css">
*{margin:0;padding:0}
#box{
900px;
height:400px;
margin:100px auto;
}
#box #nav{
900px;
height:40px;
}
#box #nav ul li .active{
background:
}
#box #nav ul li{/*这块是固定的*/
list-style-type:none;
80px;
height:40px;
float:left;
font-size:14px;
font-family:微软雅黑；
text-align:center;
line-height:40px
cursor:pointer;
border-right:1px solid #ddd;
}
#box #nav ul li hover:{
background:#ccc;
color:#c558a
}
#box #content{
900px;
height:360px;
}
#box #content ul li{
list-style:none;
900px;
height:360px;
}
</style>
<body>
<div id="box"></div>
<div id="nav">
<ul>
<li>我的关注</li>
<li>推荐</li>
<li>导航</li>
<li>视频</li>
<li>购物</li>
<li>英语</li>
</div>
<div >
<ul>
<li style="background:#fff00" display:block></li>
<li style="background:#fff00"></li>
<li style="background:#fff00"></li>
<li style="background:#fff00"></li>
<li style="background:#fff00"></li>
<li style="background:#fff00"></li>
</ul>
</div>
<script type="text/javascript">
//获取对象
//获取ID名的方法getElementById();
//获取标签名的方法getElementByTagName()
var Nav=document.getElementId("nav");
var Nli=Nav.getElementTagName("li");
var Con=document.getElementById("content");
var Cli=Con.getElementByTagName("li");
//如何给所有的导航li添加点击事件
for(var i=0;i<Nli.length;i++)
{
Nli[i].index=i;//自定义属性来存储li
Nli[i].onclick=function(){
//找到对应的li内容
for(var d=0;d<Nli.length;d++)
{
if(i=this.index){
Cli[i].style.display="block";
this.className="active";
}else{
Cli[i].style.display="none";
Nli[d].className="";
}
/* for( var d=0;d<Nli.length;d++)
{
Cli[d].style.display="none";
}
Cli[this.index].style.display="block";
}
}
*/
</body>
<>