导航条变色
<style type="text/css">
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.skin{
margin-top:50px;
}
.skin>li{
width:10px;
height:10px;
margin-right: 20px;
}
.skin>li:first-child{
background: #f00;
}
.skin>li:nth-child(2){
background: #0f0;
}
.skin>li:nth-child(3){
background: #000;
}
ul{
width:500px;
margin:0 auto;
overflow: hidden;
}
.nav{
background: red;
}
ul>li{
float:left;
}
.nav{
margin-top:10px;
}
.nav>li>a{
display: inline-block;
width:82px;
height:35px;
line-height: 35px;
color:#fff;
text-align: center;
border-left:1px solid #fff;
}
</style>
</head>
<body>
<div>
<ul class='skin'>
<li class='red'></li>
<li class='blue'></li>
<li class='black'></li>
</ul>
<ul class='nav'>
<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>
<li><a href="#">旅游</a></li>
</ul>
</div>
<script type="text/javascript">
var arr=['pink','purple','yellow'];
var skin=document.querySelectorAll('.skin>li');
var nav=document.querySelector('.nav');
var body=document.querySelector('body');
for(var i=0;i<skin.length;i++){
skin[i].onclick=function(){
var num=arr[i];
console.log(num);
var a=this.className;
console.log(a);
this.style.background='#fff';
b='5px solid'+'\t'+a;
console.log(b);
this.style.border=b;
console.log(this.style.border);
nav.style.background=a;
console.log(nav.style.background);
console.log(arr[num]);
body.style.background=arr[num];
}
}
</script>
网友评论