0

人々が特定のラジオボタンをクリックしたときのために、非常に基本的な非表示/表示 div 機能を設定しています。非表示の div の 1 つでフォームを作成する必要がありますが、非表示の 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では機能しなくなります。

うまくいけば、これは明確な説明です。どんな助けでも大歓迎です！

4

1 に答える 1

0

あなたのhideTabs()関数には、2 つのタイプミスがあります。

まず、配列を反復処理してtab[]いますが、配列の長さに対してチェックしていますnav[]。最初の例では同じ数の要素があるため、これは機能しますが、それは単なる偶然です。配列の長さに対して評価すると、tab[]よりうまく機能します。あなたが抱えているもう1つの問題は、 for ループがそれ以上の長さで終了することです。問題は、配列がゼロからカウントを開始することです。したがって、長さが 3 の場合、リストの項目はタブ [0]、タブ [1]、およびタブ [2] になります。あなたのコードは、存在しないタブ[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 コンソールを使用して、スクリプトが機能しなくなった場合にエラーを確認する必要があります。通常、何が起こっているかについてのヒントを与えるエラーがあります。

于 2012-08-01T23:10:11.270 に答える