基于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'; 
    }