显示隐藏基于div不工作

时间:2013-02-25 07:24:54

标签: javascript html css

<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元素,它不起作用。

知道如何纠正它。

由于

1 个答案:

答案 0 :(得分:0)

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

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

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