管理多个显示/隐藏 div答案

【问题标题】：managing several show/hide divs管理多个显示/隐藏 div
【发布时间】：2015-10-16 09:26:53
【问题描述】：

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

这是显示/隐藏功能的第一个示例，可以同时完成而不隐藏另一个divs。

小提琴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);
}

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

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

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

【问题讨论】：

你在寻找什么浏览器支持
抱歉，HideAllShowOne 应该做什么？
看起来您在IDvaluesOfEachDiv 中有一些额外的ID 检查jsfiddle.net/eqs6dy6f/3
我认为那将显示一个部分然后隐藏当前打开的 div。但它不起作用我会附上代码的参考页。

标签： javascript html css

【解决方案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>

【讨论】：

我使用的代码是否在某些浏览器上不支持？
您希望支持多旧的浏览器？
@MichaelPon 在这种情况下就足够了，请参阅w3counter.com/globalstats.php
@ArunPJohny，我有一个问题，你能回答吗？你是我认识的可靠专家，这就是为什么：stackoverflow.com/questions/33166591/…

【解决方案2】：

我建议使用更简单的jQuery。

将其包含在

中

<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>

HTML

<div id="id_one">Item 1</div>
<div id="content_one">
    content goes here
</div>

<div id="id_two">Item 1</div>
<div id="content_two">
    content goes here
</div>

脚本：

$(function()
{
    $("#content_one").hide();
    $("#content_two").hide();
});

$("#id_one").on("click",function()
{
    $("#content_one").slideDown("fast");
});

$("#id_two").on("click",function()
{
    $("#content_two").slideDown("fast");
});

【讨论】：

【解决方案3】：

如果您的 HTML 中的每个 DIV 都有一个 "Button" - 您可以按元素 index

var btn = document.querySelectorAll(".btn");
var div = document.querySelectorAll(".ele");

function toggleDivs() {
  for(var i=0; i<btn.length; i++) {
    var us = i===[].slice.call(btn).indexOf(this);
    btn[i].tog = us ? this.tog^=1 : 0;
    div[i].style.display = ["none","block"][us?[this.tog]:0];
  }
}

for(var i=0; i<btn.length; i++) btn[i].addEventListener("click", toggleDivs);

.btn{/* Anchors Buttons */ display:block; cursor:pointer; color:#00f;}
.ele{/* Hidden Divs */     display:none;}

<a class="btn"> 1Click to show/hide.</a>
<div class="ele"><p>1Content goes here.</p></div>
<hr>
<a class="btn">2Click to show/hide.</a>
<div class="ele"><p>2Content goes here.</p></div>
<hr>

【讨论】：