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

한 가지 방법은 클래스를 추가하고이를 숨기기 위해 그 기반으로 요소를 추구하는 것입니다 닫을 필요가 열려있는 사람을 식별 ..

var divState = {}; // we store the status in this object 
function showhide(id) { 
    if (document.getElementById) { 
     var divid = document.getElementById(id); 

     divState[id] = (divState[id]) ? false : true; // initialize/invert status (true is visible and false is closed) 
     //close others 
     for (var div in divState){ 
      if (divState[div] && div != id){ // ignore closed ones and the current 
       document.getElementById(div).style.display = 'none'; // hide 
       divState[div] = false; // reset status 
      } 
     } 
     divid.style.display = (divid.style.display == 'block' ? 'none' : 'block'); 
    } 
} 

데모 http://jsfiddle.net/gaby/LfzYc/

Answer 2

을 당신은 모든 div의를 검색 할 document.getElementByTagName을 사용할 수 있습니다.

그런 다음 각각에 대해 getElementById에서 얻은 div 인 경우 block 또는 그렇지 않은 경우 none에서 스타일을 설정합니다.

은 (내가 여기에 관련된 모든 div의에 클래스를 추가하고 페이지의 unrelevant 부분이 영향을받지 않도록 만 반복하는 동안이 클래스를 가진 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;을 추가 ... 모든 사업부를 숨기고 당신이 클릭을 표시합니다. 링크의 href 속성에서 javascript:void(null)을 사용하는 것보다 더 명확하고 이해하기 쉽습니다. 문제가 해결 되었습니까?

Answer 4

클래스 이름을 사용하는 것이 일반적인 방법이지만 jquery/rightjs/whateveryoulike와 같은 lib를 사용하는 것이 좋습니다. 왜냐하면 : getElementsByClassName()은 < IE9와 querySelectorAll()에 의해 지원되지 않습니다. < IE8에 의해 지원되지 않습니다. lib를 사용할 수 없다면 getElementsByTagName ("div")를 통해 모든 div를 반복하고 해당 클래스를 검사해야합니다.

또 다른 개체와 사용 요소의 상태를 저장하는 것입니다 (다른 답변 같이 )