点击导航栏内容变
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
a{
text-decoration: none;
}
.container{
width:600px;
margin:100px auto;
}
.nav{
height:40px;
line-height: 40px;
overflow: hidden;
}
.nav li{
float:left;
}
.nav li a{
display:inline-block;
width:150px;
height:40px;
text-align: center;
color:#fff;
background: #000;
}
.nav li:first-child a{
background: #f00;
}
/*box*/
.box{
position: relative;
}
.box li{
width:600px;
height:300px;
line-height: 300px;
text-align: center;
position: absolute;
background: #eee;
display: none;
}
.box li:first-child{
display: block;
}
</style>
</head>
<body>
<div class='container'>
<!--导航-->
<ul class='nav'>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">综艺</a></li>
<li><a href="#">军事</a></li>
</ul>
<ul class='box'>
<li>还在打王者LOL呢？国家大事你关心了么？</li>
<li>元芳薛之谦事件你怎么看？</li>
<li>娱乐圈的那点事，潜规则？</li>
<li>淘宝双十一你们是不是又要剁手了？</li>
</ul>
</div>
<script>
//找到nav中的li
var navLi=document.querySelectorAll('.nav li');
//找到box中的li
var boxLi=document.querySelectorAll('.box li');
//遍历navLi
for(var i=0;i<navLi.length;i++){
navLi[i].index=i;
navLi[i].onclick=function(){
//获取当前的索引值
var num=this.index;
for(var j=0;j<navLi.length;j++){
//统一样式
navLi[j].firstElementChild.style.background='#000';
boxLi[j].style.display='none';
}
navLi[num].firstElementChild.style.background='#f00';
boxLi[num].style.display='block';
}
}
</script>
网友评论