Question

我在这里有一些脚本在点击时显示和隐藏div。现在我需要的是一次只显示一个div。我有一个控制它们的代码，但它不起作用我不知道javascript的大部分内容。

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

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);
}

我创建的另一个小提琴会做我需要的但脚本似乎不起作用。小提琴here

感谢@Abhas Tandon

在我的代码上找到了解决方案

IDvaluesOfEachDiv Remove中OK内的额外ID似乎与代码有误。

Answer 1

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

＆＃13;

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')

}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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");
});

Answer 3

如果您的HTML中的每个 DIV 都有“按钮” - 您可以按元素索引

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>

管理几个显示/隐藏div

3 个答案: