選項卡式視圖，爲什麼它不起作用？

Question

我正在嘗試這個簡單的代碼，但它只適用於頁面1和2，對於3它顯示空白。我找不出有什麼問題，請幫忙！

<div id="allTabs"> 
    <input type="button" value="Page 1" name="b1" onclick='change("page1");'/> 
    <input type="button" value="Page 2" name="b2" onclick='change("page2");' /> 
    <input type="button" value="Page 3" name="b3" onclick='change("page3");' /> 

    <div id="page1" >This is page 1 </div> 
    <div id="page2" style="display: none"> This is page 2 </div> 
    <div id="page3" style="display: none"> This is page 3 </div> 
</div> 
<script type="text/javascript"> 

    function change(pageId) { 
      var f=document.getElementById('page1'); 
      var h=document.getElementById('page2'); 
      var k=document.getElementById('page3') 

      if(pageId=="page1") { 
       f.style.display= 'block'; 
       h.style.display= 'none'; 
       k.style.diplay= 'none'; 
      } 
     if(pageId=="page2") { 
       f.style.display= 'none'; 
       h.style.display= 'block'; 
       k.style.diplay= 'none'; 
      } 
     if(pageId=="page3") { 
       f.style.display= 'none'; 
       h.style.display= 'none'; 
       k.style.diplay= 'block'; 
      } 
     } 
</script> 

Answer 1

有你在第三個條件拼錯display爲diplay一個錯字

function change(pageId) { 
 
      var f=document.getElementById('page1'); 
 
      var h=document.getElementById('page2'); 
 
      var k=document.getElementById('page3'); 
 

 
      if(pageId=="page1") { 
 
       f.style.display= 'block'; 
 
       h.style.display= 'none'; 
 
       k.style.diplay= 'none'; 
 
      } 
 
     if(pageId=="page2") { 
 
       f.style.display= 'none'; 
 
       h.style.display= 'block'; 
 
       k.style.display= 'none'; 
 
      } 
 
    debugger; 
 
     if(pageId=="page3") { 
 
       f.style.display= 'none'; 
 
       h.style.display= 'none'; 
 
       k.style.display= 'block'; 
 
      } 
 
     }

<div id="allTabs"> 
 
    <input type="button" value="Page 1" name="b1" onclick='change("page1");'/> 
 
    <input type="button" value="Page 2" name="b2" onclick='change("page2");' /> 
 
    <input type="button" value="Page 3" name="b3" onclick='change("page3");' /> 
 

 
    <div id="page1" >This is page 1 </div> 
 
    <div id="page2" style="display: none"> This is page 2 </div> 
 
    <div id="page3" style="display: none"> This is page 3 </div> 
 
</div>

Answer 2

您犯了一個愚蠢的拼寫錯誤。 diplay代替display

工作實例：http://codepen.io/anon/pen/BNNgBO

<div id="allTabs"> 
    <input type="button" value="Page 1" name="b1" onclick='change("page1");'/> 
    <input type="button" value="Page 2" name="b2" onclick='change("page2");' /> 
    <input type="button" value="Page 3" name="b3" onclick='change("page3");' /> 

    <div id="page1" >This is page 1 </div> 
    <div id="page2" style="display: none"> This is page 2 </div> 
    <div id="page3" style="display: none"> This is page 3 </div> 
</div> 
<script type="text/javascript"> 

    function change(pageId) { 
      var f=document.getElementById('page1'); 
      var h=document.getElementById('page2'); 
      var k=document.getElementById('page3') 

      if(pageId=="page1") { 
       f.style.display= 'block'; 
       h.style.display= 'none'; 
       k.style.display= 'none'; 
      } 
     if(pageId=="page2") { 
       f.style.display= 'none'; 
       h.style.display= 'block'; 
       k.style.display= 'none'; 
      } 
     if(pageId=="page3") { 
       f.style.display= 'none'; 
       h.style.display= 'none'; 
       k.style.display= 'block'; 
      } 
     } 
</script>