javascript - 显示基于 div 的隐藏不起作用

Question

<div id="tabs">
    <div id="nav">
      <p>Show Div 1:<input type="radio" name="tab" value="pkfrom" class="div1" /></p>
      <p>Show Div 2:<input type="radio" name="tab" value="pkfrom" class="div2" /></p>
    </div>

    <div id="div1" class="tab">
     <? echo form_open('email/send');?>

      <table width="100%">
      <tr><td>

Username:</td><td><? echo form_input('username', 'your username');?></td></tr>
<tr><td> Name:</td><td> <? echo form_input('Name', '');?></td></tr>
<tr><td> Address:</td><td> <? echo form_textarea('address', '');?></td></tr>
<tr><td> Degree:</td><td> <? echo form_input('specialist', '');?></td></tr>
<tr><td> Degree:</td><td> <? echo form_input('specialist', '');?></td></tr>

<? echo form_close();?>
      </table>

    </div>

    <div id="div2" class="tab">
      <p>this is div 2</p>
    </div>
  </div>

  <script type="text/javascript" charset="utf-8">
    (function(){
      var tabs =document.getElementById('tabs');
      var nav = tabs.getElementsByTagName('input');

      /* 
      * Hide all tabs
      */
      function hideTabs(){
        var tab = tabs.getElementsByTagName('div');
        for(var i=0;i<=nav.length;i++){
          if(tab[i].className == 'tab'){
            tab[i].className = tab[i].className + ' hide';
          }
        }
      }

      /*
      * Show the clicked tab
      */
      function showTab(tab){
        document.getElementById(tab).className = 'tab'
      }

      hideTabs(); /* hide tabs on load */

      /* 
      * Add click events
      */
      for(var i=0;i<nav.length;i++){
        nav[i].onclick = function(){
          hideTabs();
          showTab(this.className);
        }
      }
    })();
  </script>
</div>

这是基于div的显示和隐藏的编码。但它只有在我只在 div 中键入普通文本时才有效。但是，如果我添加 php 或任何 html 元素，它就不起作用。

知道如何纠正它。

谢谢

Answer 1

我稍微修改了一下，它似乎对我有用: 我修改了以下内容 -

      if(tab[i].className == 'tab'){
       document.getElementById('div' + i).style.display = 'none';
      }

和

  function showTab(tab){
    document.getElementById(tab).style.display = 'block';
  }