JavaScript - 隱藏所有其他divs

我有一些div在點擊鏈接後纔可見。如何關閉所有打開的div，以便只有被點擊的div纔可見？
我使用這個.js文件：JavaScript - 隱藏所有其他divs

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>

感謝烏利

來源

2011-12-28 Uli

可以也顯示您的DIV結構 – 2011-12-28 12:12:49

的一種方法是添加一個類和尋求基於該隱藏它們的元素（如圖在其他的答案）

一種替代方法是將元件的狀態存儲在一個對象，並使用該確定需要關閉打開的那些..

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/

來源

2011-12-28 12:26:37

有沒有一種方法來限制打開/關閉/重置爲只有在某些部分下的div id（例如所有div下的div id = sidebar「將經歷打開/關閉/重置循環）？希望這是有道理的。 – jgrannis 2013-07-29 04:06:57

您可以使用document.getElementByTagName檢索所有div。

然後遍歷它們，並且如果它是從getElementById之前獲得的div，則對於每個設置樣式爲block否則爲none。

（我建議類添加到所有與此有關的div，並只考慮迭代過程中使用這個類的div，從而使頁面的unrelevant部分將不會受到影響。）

來源

2011-12-28 12:12:42 Kos

以下代碼會隱藏所有的DIV，並顯示一個你點擊...

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)更清晰且更易於理解。它解決了你的問題嗎？

來源

2011-12-28 12:13:32 Deleteman

有什麼關鍵的區別，如果你的任何和接受之間nswer？任何速度相關的差異？ – pal4life 2014-11-07 21:23:58

使用類名是這樣做的典型方法，但我建議使用像jquery/rightjs/whateveryoulike這樣的庫;因爲：不支持getElementsByClassName（）IE9和querySelectorAll（）不支持< IE8。如果你不能使用lib，那麼你需要通過getElementsByTagName（「div」）迭代所有的div並檢查該類。

來源

2011-12-28 12:21:56 biophonc

好點。雖然有輕量級的解決方案，http://polyfilljs.com/polyfills/getelementsbyclassname.html – Kos 2011-12-28 12:29:42

是的，但不適用於ie7，他然後會需要這個：http://polyfilljs.com/polyfills/queryselector。 HTML;） – biophonc 2011-12-28 12:35:16

JavaScript - 隱藏所有其他divs

回答

相關問題