选项卡
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <style> 10 .box{ 11 height:430px; 12 width:650px; 13 border:1px solid #000; 14 overflow:hidden; 15 } 16 li{ 17 list-style: none; 18 } 19 img{ 20 margin: 0; 21 width:650px; 22 height: 400px; 23 } 24 ul,ol{ 25 margin: 0; 26 padding: 0; 27 } 28 .uls li{ 29 float: left; 30 height: 32px; 31 width: 33.3%; 32 cursor:pointer; 33 text-align: center; 34 } 35 .ols li{ 36 display: none; 37 } 38 .uls .main{ 39 background-color:whitesmoke; 40 opacity: 0.5; 41 margin-bottom: 2px solid red; 42 transition: 0.5s; 43 font-size: 20px; 44 45 } 46 .ols .main{ 47 display: block; 48 background-color: #CCC; 49 } 50 </style> 51 <body> 52 <div class="box"> 53 <ul class='uls'> 54 <li class="main">Y</li> 55 <li>Q</li> 56 <li>H</li> 57 </ul> 58 <ol class="ols"> 59 <li class="main"><img src="./images/a.jpg"></li> 60 <li><img src="./images/b.jpg"></li> 61 <li><img src="./images/c.jpg"></li> 62 </ol> 63 </div> 64 <script> 65 var arr1 = document.querySelectorAll('.uls li'); 66 var arr2 = document.querySelectorAll('.ols li'); 67 for( var i=0;i<arr1.length;i++){ 68 arr1[i].index = i; //给arr1[i]设置一个index属性,值为i 69 arr1[i].onclick = function(){ 70 for(var j=0;j<arr2.length;j++){ 71 arr1[j].className = ''; 72 arr2[j].className = ''; 73 } 74 // console.log(this); //.uls li; 75 this.className = 'main'; 76 arr2[this.index].className = 'main'; 77 } 78 } 79 </script> 80 </body> 81 </html>
效果:
