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

你犯了一个愚蠢的拼写错误。 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>

Answer 2

在 第三个条件

中，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>

标签视图，为什么它不起作用？

2 个答案: