javascript - 一个js选项卡的例子中某次遍历的意思不太懂。。。
问题描述
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style>*{ margin:0; padding: 0;}.active{ background: red;}#main p{ width: 200px; height: 200px; background: yellow; display: none;} </style> <script>window.onload=function(){ var op = document.getElementById(’main’); var oIp = op.getElementsByTagName(’input’); var ap = op.getElementsByTagName(’p’); for(var i=0;i<oIp.length;i++) {oIp[i].index=i;oIp[i].onclick=function(){ for(var i=0;i<oIp.length;i++) // 就是这儿 {oIp[i].className='';ap[i].style.display=''; } this.className='active'; ap[this.index].style.display='block'} }} </script></head><body> <p id='main'><input type='button' value='111'><input type='button' value='222'><input type='button' value='333'><input type='button' value='444'><p style='display: block'>1</p><p>2</p><p>3</p><p>4</p> </p></body></html>
这是一个网上的选项卡的例子，然后不太懂例子中js部分，第二次for循环的意思是什么。。。QAQ
问题解答
回答1：外面一层的for，主要是为了给每一个选项卡按钮绑定onclick事件。
而里面的这个for，是在绑定的onclick事件之内，它的作用是，当点击了被绑定的选项卡时，遍历所有的选项卡，把不是当前点击的选项卡都重置成隐藏状态，然后这个for下面的：
this.className='active';ap[this.index].style.display='block';
是把当前点击项对应的标签页显示出来。
这样，就只有当前点击项对应的标签会显示出来，其余的标签页都被隐藏。如果没有这个for，当你点击第一个标签，第一个标签显示出来。然后你点击了第二个标签，第二个标签显示出来，现在就有第一个和第二个标签页同时显示；接着你点击了第三个标签，前面两个没有隐藏，而第三个标签页显示出来，…………这样，到最后，你点完所有的标签按钮时，所有的标签页都显示出来，这显然不是标签页的效果。
为了使当前点击之外的标签页都隐藏掉，所以在显示当前标签页之前，先用for遍历，把所有标签页隐藏。
回答2：大致的功能是要实现点击切换到该选项卡。所谓切换，就是其他隐藏，当前显示。而你说的那部分就是隐藏所有 input 的。就是每次点击是，都遍历一次 所有 input, 去掉 class 和 display 属性，藏起来，然后单单为 this, 也就是当前点击项加上 class 和 display 属性，显示出来
回答3：我给代码打上注释，看到注释就知道了！代码原理就是先清除所有input的类名和隐藏所有的p，然后给当前点击的input加上类名，显示当前索引对应的p!
<script> window.onload=function() {var op = document.getElementById(’main’);var oIp = op.getElementsByTagName(’input’);var ap = op.getElementsByTagName(’p’);//遍历inputfor(var i=0;i<oIp.length;i++){ //自定义属性index，（） oIp[i].index=i; //给每一个input绑定点击事件 oIp[i].onclick=function() { //首先，清除掉所有的input的类名和p的样式（就是让所有p先隐藏）。for(var i=0;i<oIp.length;i++) // 就是这儿{ oIp[i].className=''; ap[i].style.display='';}//当前的input添加类名this.className='active';//根据当前input的索引，把对应的索引的p加上样式（就是让对应的索引的p现实）ap[this.index].style.display='block' }} } </script>
相关文章：
1. css3 - Firefox 字号相对IE、Chrome更大，如何在CSS中统一？2. html5 - HTML代码中的文字乱码是怎么回事？3. javascript - 微信小程序 wx.downloadFile下载文件大小有限制吗4. android - 求 360浏览器 百度浏览器 搜狗浏览器的最新启动类名5. css - ul ol前边的标记如何调整样式呢6. php laravel框架模型作用域7. python 读取csv文件可以读取但内容错误，但单独用excel打开正常，如何解决？8. css3动画 - 实现css3推倒动画9. css - 前端flex布局嵌套内层的布局不起作用？10. 微信端电子书翻页效果
网公网安备