选项卡

 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         650px;
13         border:1px solid #000;
14         overflow:hidden;
15 }
16 li{
17     list-style: none;
18 }
19 img{
20     margin: 0;
21     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      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>
效果: