導(dǎo)航條變色
<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>
