我使用 html、css 和 Javascript 创建的选项卡面板无法正常工作

Question

我用 Javascript 创建了一个标签面板。当我在没有任何编程的情况下执行它时它工作正常但是在将它与一些条件和循环语句放在一起之后它不起作用。在 javascript 中制作程序时出现了一些问题。请单击下方以查看 jsfiddle 中的整个编码，并建议我如何修复错误。谢谢

HTML :

<button class="tabButton">Tab 01</button>
<button class="tabButton">Tab 02</button>
<button class="tabButton">Tab 03</button>
<button class="tabButton">Tab 04</button>
<button class="tabButton">Tab 05</button>

<div class="tabPanel" style="display:block">
    <h3>Tab panel 01</h3>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in rebus apertissimis nimium longi sumus. Quicquid porro animo cernimus, id omne oritur a sensibus; Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Philosophi autem in suis lectulis plerumque moriuntur. Falli igitur possumus. 
    </p>
</div>

<div class="tabPanel">
    <h3>Tab panel 02</h3>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in rebus apertissimis nimium longi sumus. Quicquid porro animo cernimus, id omne oritur a sensibus; Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Philosophi autem in suis lectulis plerumque moriuntur. Falli igitur possumus.
    </p>
</div>

<div class="tabPanel">
    <h3>Tab panel 03</h3>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in rebus apertissimis nimium longi sumus. Quicquid porro animo cernimus, id omne oritur a sensibus; Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Philosophi autem in suis lectulis plerumque moriuntur. Falli igitur possumus. 
    </p>
</div>

<div class="tabPanel">
    <h3>Tab panel 04</h3>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in rebus apertissimis nimium longi sumus. Quicquid porro animo cernimus, id omne oritur a sensibus; Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Philosophi autem in suis lectulis plerumque moriuntur. Falli igitur possumus.
    </p>
</div>

<div class="tabPanel">
    <h3>Tab panel 05</h3>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in rebus apertissimis nimium longi sumus. Quicquid porro animo cernimus, id omne oritur a sensibus; Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Philosophi autem in suis lectulis plerumque moriuntur. Falli igitur possumus. 
    </p>
</div>

css:

.tabPanel{
     width:500px;
    height:150px;
    background-color:grey;
    margin:0;
    padding:20px;
    display:none;
}

Javascript:

for (i=0; i<tabBtn.length; i++) {
    tabBtn[i].onclick = function(){
            for(r=0; r<panel.length; r++){
                    if ( i==r ){
                    panel[r].style.display = "block";
                    }   else   {
                    panel[r].style.display = "none";
                    }
            }
    }
}

https://jsfiddle.net/suhailyazdan/vwc42r9x/17/

Answer 1

这里发生的事情是，当 'onclick' 处理程序运行时，for 循环已经完成。

这样想：Javascript遇到for循环，循环5次，附加处理程序然后退出for循环。

当点击tabBtn时，它里面存储了for循环的最终值。 i 将始终等于 5。自己尝试一下，console.log(i) 在您的点击处理程序中，您将看到它始终为 5。

我们如何解决这个问题？好吧，我们利用了一种叫做闭包的东西。闭包是一个函数，它将 'save' i 的值并将其传递给您的点击处理程序。有很多关于闭包的文档，虽然它是一个更高级的 JS 主题，但我建议您阅读它。

无论如何，这里是你将如何使用闭包来修复它：

for (i = 0; i < tabBtn.length; i++) {
  //Here is our 'closure' an Immediately Invoked anonymous function whose job is to pass (i)!
  (function(i) {
    tabBtn[i].onclick = function() {
      for (r = 0; r < panel.length; r++) {
        if (i == r) {
          panel[r].style.display = "block";
        } else {
          panel[r].style.display = "none";
        }
      }
    }
    //Here we pass it (i) at the run time.
  })(i);
}

在此处查看更新的演示： https://jsfiddle.net/vwc42r9x/21/

我使用 html、css 和 Javascript 创建的选项卡面板无法正常工作

My tab panel which I created with html, css & Javascript is not working

javascript

tabpanel

jsfiddle