JavaScript - 他のすべてのdivを非表示

Question

リンクをクリックした後に表示されるdivの数があります。クリックしたもののみが表示されるように開いているdivをすべて閉じるにはどうすればいいですか？
私はこれをの.js使用しています：

function showhide(id){ 
     if (document.getElementById) { 
     var divid = document.getElementById(id); 
     divid.style.display = (divid.style.display=='block'?'none':'block'); 
     } } 

     <a href="javascript:void(null)" onclick="showhide('features');">features</a> 
<a href="javascript:void(null)" onclick="showhide('design');">design</a> 
<a href="javascript:void(null)" onclick="showhide('create');">create</a> 

おかげ ウリ

Answer 1

（他の回答に示すよう）一つの方法は、クラスを追加し、それらを非表示にすることに基づいて要素を求めることである

代替は、オブジェクト内の要素の状態を保存し、それを使用することですhttp://jsfiddle.net/gaby/LfzYc/

Answer 2

をあなたはすべてのdivを取得するためにdocument.getElementByTagNameを使用することができます。

それから、それぞれを対象にして、それ以前にgetElementByIdから取得したdivの場合は、それぞれblockにスタイルを設定します。それ以外の場合はnoneです。

（私はページのunrelevant部分には影響されないように、ここでは関係すべてのdiv要素にクラスを追加し、唯一の反復中に、このクラスでdivを検討することをお勧めします。）

Answer 3

次コードは

function showhide(id){ 
     if (document.getElementById) { 
      var divid = document.getElementById(id); 
      var divs = document.getElementsByClassName("hideable"); 
      for(var div in divs) { 
      div.style.display = "none"; 
      } 
      divid.style.display = "block"; 
     } 
     return false; 
} 

<a href="#" onclick="showhide('features');" >features</a> 
<a href="#" onclick="showhide('design');" >design</a> 
<a href="#" onclick="showhide('create');" >create</a> 

<div class="hideable" id="features">Div 1</div> 
<div class="hideable" id="design">Div 2</div> 
<div class="hideable" id="create">Div 3</div> 

私もリンクのデフォルトの動作をプリベンするreturn false;を追加...すべてのdivを隠し、クリックしたものを表示します。リンクのhref属性でjavascript:void(null)を使用するよりもきれいで分かりやすいです。 問題を解決しますか？

Answer 4

これを行う典型的な方法はクラス名を使うことですが、これを行うにはjquery/rightjs/whateveryoulikeのようなライブラリを使うことをお勧めします。理由は：getElementsByClassName（）は< IE9でサポートされておらず、querySelectorAll（）は< IE8でサポートされていません。 libを使用できない場合は、getElementsByTagName（ "div"）を使用してすべてのdivを繰り返し処理し、そのクラスをチェックする必要があります。