トグルしようとすると、ブラウザによって読み込まれた余分なDIVがスクリプトを台無しにしています

Question

こんにちは私はナビゲーションオプションをクリックするとテキストの特定のブロックを隠して表示する簡単なトグルをしています。私はforループを実行し、length.divを使って表示または非表示にしたいdivを正確に決定することでこれをやっています。 seowaukebarは私のソースコードにdivを追加しています。例えば誰かがそれを持っていればdiv.lengthが変わってしまいます。そのための解決策が必要です。

function forLoopToggle(id) { 

var chosenTab = document.getElementById(id); 

//loop between the 6th and after divs - the initial value is for Google chrome, and if someone has SEO quake because an extra div is added in that case 
for (var toggle = 6; toggle < div.length; toggle++) { 

     //for clicking on experience 
     if (div[toggle] == chosenTab && chosenTab.id == 'experience' && chosenTab.style.display != 'block') { 
         div[toggle].style.display = 'block'; 
         div[++toggle].style.display = 'block'; 
         div[++toggle].style.display = 'block'; 
         div[++toggle].style.display = 'block'; 
         div[++toggle].style.display = 'block'; 
         div[++toggle].style.display = 'block'; 
         div[5].style.display = 'block';//employment div 
         div[6].style.display = 'none'; 
        } 

     //for clicking on projects 
     if (div[toggle] == chosenTab && chosenTab.id == 'projects' && chosenTab.style.display != 'block') { 
         div[toggle].style.display = 'block'; 
         div[++toggle].style.display = 'block'; 
         div[++toggle].style.display = 'block'; 
         div[++toggle].style.display = 'block'; 
         div[++toggle].style.display = 'block'; 
         div[5].style.display = 'none'; 
         div[6].style.display = 'block';//keyword div 
        } 

     //for clicking on a div which display is currently none 
     else if (div[toggle] == chosenTab && chosenTab.style.display != 'block') { 
         div[toggle].style.display = 'block'; 
         div[5].style.display = 'none'; 
         div[6].style.display = 'none'; 
     } 

     //all divs that have not been clicked on will not be shown 
     else if (div[toggle] != chosenTab) { 
         div[toggle].style.display = 'none'; 
     }  
     else if (div[toggle] = chosenTab && chosenTab.style.display == 'block') { 
         div[toggle].style.display = 'none'; 
     } 
     //allows you toggle on and off of the same div 

     else { 
         div[toggle].style.display = 'none'; 
         div[5].style.display = 'none'; 
         div[6].style.display = 'none'; 
      } 
} 

}

Answer 1

あなたはthisのように/非表示のセクションを示し、またはthisのようなもので、コンテンツの2つの異なるバージョン間で切り替えることができます：ここに私のJavascriptです。それは、<a href="jsFunction()">の中からjavascript関数を起動することは、技術的に悩んでいますが、仕事をします。私はまっすぐなjavascriptを使用してこれを正しく行う方法を学ぶ必要がありますが、これが始まりです。

注：jsfiddleでは、何らかの理由でインラインJavaScriptを使用する必要がありましたが、実際には別のJSファイルにその関数を置くことができます。