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. 淺談vue生命周期共有幾個階段？分別是什么？2. macos - mac下docker如何設置代理3. node.js - Angular-webpack-Starter, 怎么把NodeJS添加進項目里？4. html5 - vue項目中我用webpack編譯不成功5. javascript - 安裝了babel,不起作用6. html5 - 純CSS怎么做出這種一模一樣的導航條導航塊那里還有個下拉菜單，請大家指導一下7. index.php錯誤，求指點8. 微信公眾號在線生成二維碼帶參數怎么搞？9. 微信開放平臺 - android 微信支付后點完成按鈕，后回調打開第三方頁面，屏幕閃動，求解決方法10. 視頻 - html5 video的autoplay 在智能手機上不運作？
網公網安備