javascript - 管理多个显示/隐藏 div

Question

我这里有一些脚本可以在单击时显示和隐藏 div。现在我需要的是一次只显示一个 div。我有一个控制它们的代码，但它不起作用我对 javascript 了解不多。

这是第一个可以在不隐藏其他 div 的情况下同时完成显示/隐藏功能的示例。

fiddle HERE

HTML:

<a href="javascript:ReverseDisplay('uniquename')">
Click to show/hide.
</a>

<div id="uniquename" style="display:none;">
<p>Content goes here.</p>
</div>



<a href="javascript:ReverseDisplay('uniquename1')">
Click to show/hide.
</a>

<div id="uniquename1" style="display:none;">
<p>Content goes here.</p>
</div>

脚本:

function HideContent(d) {
    document.getElementById(d).style.display = "none";
}

function ShowContent(d) {
    document.getElementById(d).style.display = "block";
}

function ReverseDisplay(d) {
    if (document.getElementById(d).style.display == "none") {
        document.getElementById(d).style.display = "block";
    } else {
        document.getElementById(d).style.display = "none";
    }
}

function HideAllShowOne(d) {
// Between the quotation marks, list the id values of each div.

var IDvaluesOfEachDiv = "idone idtwo uniquename1 uniquename";

//-------------------------------------------------------------
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," ");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/  +/g," ");
var IDlist = IDvaluesOfEachDiv.split(" ");
for(var i=0; i<IDlist.length; i++) { HideContent(IDlist[i]); }
ShowContent(d);
}

我创建的另一个 fiddle 可以满足我的需要，但脚本似乎无法正常工作。 fiddle here

---

感谢@Abhas Tandon，在我的代码中找到了解决方案

fiddle here IDvaluesOfEachDiv 中的额外 id 似乎在代码中出现了一些错误。

Answer 1

如果您对 IE10+ 的支持感到满意，那么

function ReverseDisplay(d) {
  var els = document.querySelectorAll('.toggle.active:not(#' + d + ')');
  for (var i = 0; i < els.length; i++) {
    els[i].classList.remove('active');
  }
  document.getElementById(d).classList.toggle('active')

}

.toggle {
  display: none;
}
.toggle.active {
  display: block;
}

<a href="javascript:ReverseDisplay('uniquename')">
    Click to show/hide.
</a>
<div id="uniquename" class="toggle">
  <p>Content goes here.</p>
</div>

<a href="javascript:ReverseDisplay('uniquename1')">
    Click to show/hide.
</a>
<div id="uniquename1" class="toggle">
  <p>Content goes here.</p>
</div>