选项卡
Posted qihang0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选项卡相关的知识，希望对你有一定的参考价值。
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>
效果:
以上是关于选项卡的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 2.1 javascript嵌套选项卡：内部选项卡关闭外部选项卡
用户选择选项卡时如何重置 UITabBarController 的选项卡（或选项卡控制器）？
JQuery选项卡 - 嵌套选项卡的问题 - 在初始加载时激活子选项卡