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控制台检查错误，如果您的脚本停止工作 - 通常会出现一个错误，告诉您有关正在发生的事情的提示。

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

1 个答案: