输入字段没有显示在隐藏/显示单选按钮

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[]数组的长度进行检查。这是有效的，因为你在第一个例子中有相同数量的元素，但这只是一个巧合。如果您根据阵列的长度对其进行评估，则效果会更好。您遇到的另一个问题是您的for循环以大于或等于长度结束。问题是数组从0开始计数，所以如果长度为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控制台（或任何其他浏览器）来检查错误，如果你的脚本停止工作，通常有一个错误那会给你提示发生了什么。