javascript - 选项卡式 View ，为什么它不起作用？

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>