输入字段未显示在带有单选按钮的隐藏/显示 div 中

Question

当人们单击某个单选按钮时，我设置了一个非常基本的隐藏/显示 div 功能。在其中一个隐藏的 div 中，我需要创建一个表单，但是当我将输入字段添加到隐藏的 div 时，我的功能停止工作。

<div id="tabs">
<div id="nav">
  <input type="radio" name="primary_contact_director" value="Yes" class="div1">Yes</input>
    <input type="radio" name="primary_contact_director" value="No" class="div2">No</input>
</div>

<div id="div1" class="tab">
  <p>this is div 1</p>
</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);
    }
  }
})();

但是，当我添加时，此代码有效

<label class="title">First Name:</label>
    <input type="text" name="first_name" class="form">
<label class="title">Last Name:</label>
    <input type="text" name="last_name" class="form">
<label class="title">Business Address:</label>
    <span class="instructions">Please enter a physical address. P.O. Boxes are not acceptable for filing.<br>
    If your business is run out of your home, please list that address.</span><br>
    <input type="text" name="business_address" class="form">
<label class="title">City:</label>
    <input type="text" name="business_city" class="form">
<label class="title">State</label>
    <select name="business_state">
        <option value="California">California</option>
    </select>
<label class="title">Zip Code:</label>
    <input type="text" name="business_zip" class="form">
<label class="title">Business Phone Number:</label>
    <input type="text" name="business_phone" class="form"><br>

对于我的 div2，它停止工作。

希望这是一个清晰的解释。任何帮助都将不胜感激！

Answer 1

在您的 hideTabs() 函数中，您有两个拼写错误。

首先，您正在遍历 tab[] 数组，但您正在检查 nav[] 数组的长度。这是有效的，因为您在第一个示例中具有相同数量的元素，但这只是巧合。如果您根据tab[] 数组的长度对其进行评估，它会更好地工作。您遇到的另一个问题是您的 for 循环以大于或等于长度结束。问题是数组从零开始计数，因此如果长度为 3，则列表中的项目为 tab[0]、tab[1] 和 tab[2]。您的代码试图为 tab[3] 设置一些不存在的东西。

这是工作代码：

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

将来，如果您的脚本停止工作，您应该考虑使用 Chrome（或任何其他浏览器）中的 javascript 控制台来检查错误——通常会有一个错误提示您正在发生什么。