此代码不起作用？ display : none 和 block 再次不起作用

Question

我不知道为什么。 我找到了答案，但我需要理由，因为。 我正在创建一个标签。

我也试过了，

  document.write(x[i]'<style>display:none<style');

和

  document.getElementId(x[i]).styly.display="none";

它正在工作

        var x = new Array("nf", "sc", "rf", "gd");
        for (i = 0; i < 5; i++) {
               var z = document.getElementById(x[i]);
                z.style.display = "block";
            }

它也可以工作

        var x = new Array("nf", "sc", "rf", "gd");
        for (i = 0; i < 5; i++) {

              var y = document.getElementById(x[i]);           
             y.style.display = "none";
            }

它不工作

      function tab(a)
      {
        var b =a;
        var x = new Array("nf", "sc", "rf", "gd");
        for (i = 0; i < 5; i++)
         {
          if (i == b)
            {
            var z = document.getElementById(x[i]);
            z.style.display = "block";
            }
         else {
            var y = document.getElementById(x[i]);           
            y.style.display = "none";
            }
      }

     <table style="width:100%;">
      <tr>
       <td>
       <input id="Button1" type="button" value="sec 1" onclick="tab(0)" /> 
       </td>
       <td>
       <input id="Button2" type="button" value="Sec 2" onclick="tab(1)"/> 
       </td>
       <td>
       <input id="Button3" type="button" value="sec3" onclick="tab(2)"/> 
       </td>
       <td>
       <input id="Button4" type="button" value="sec4" onclick="tab(3)"/> 
       </td>
    </tr>
     </table>
     <div id="nf">It is sec 1</div>
     <div id="sc">It is sec 2</div>
     <div id="rf">It is sec 3</div>
     <div id="gd">It is sec 4</div>

我首先要更改 CSS 中的显示属性，使其正常工作。当代码在同一函数中时，css 属性的第二次更改不起作用。

这两个功能我做单独的功能它工作 但 如果我同时执行这两个功能，它就不起作用。

我得到了在下面的链接上创建标签的答案，但我不知道为什么它不起作用。 有知道的请给我解释一下

https://www.w3schools.com/howto/howto_js_tabs.asp

Answer 1

您的变量 b 未初始化。哪里来的？

function tab(a) {
    var x = new Array("nf", "sc", "rf", "gd");
    // if you already have an array use the length of it
    for (i = 0; i < x.length; i++) {
      if (i == a) {
        var z = document.getElementById(x[i]);
        z.style.display = "block";
     } else {
        var y = document.getElementById(x[i]);           
        y.style.display = "none";
     }
  }
}

<table style="width:100%;">
  <tr>
   <td>
   <input id="Button1" type="button" value="sec 1" onclick="tab(0)" /> 
   </td>
   <td>
   <input id="Button2" type="button" value="Sec 2" onclick="tab(1)"/> 
   </td>
   <td>
   <input id="Button3" type="button" value="sec3" onclick="tab(2)"/> 
   </td>
   <td>
   <input id="Button4" type="button" value="sec4" onclick="tab(3)"/> 
   </td>
</tr>
 </table>
 <!-- make all other than the first tab display none at first -->
 <div id="nf">It is sec 1</div>
 <div id="sc" style="display: none">It is sec 2</div>
 <div id="rf" style="display: none">It is sec 3</div>
 <div id="gd" style="display: none">It is sec 4</div>