选项卡

2019-08-24 14:52:34 阅读：166 来源： 互联网

 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>

效果:

标签：选项卡,uls,height,width,ols,var,li
来源： https://www.cnblogs.com/qihang0/p/11404624.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

选项卡