选项卡式视图，为什么它不起作用？

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>