管理多个显示/隐藏div

我有一些脚本，当点击时显示和隐藏div。现在我需要的是一次只显示一个div。我有一个控制它们的代码，但它不工作，我不知道JavaScript的大部分内容。管理多个显示/隐藏div

这是显示/隐藏功能的第一个示例，可以同时完成而不隐藏其他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>

SCRIPT：

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

小提琴here额外的id的IDvaluesOfEachDiv里面似乎是使一些错误与代码。

来源

2015-10-16 MIke

什么是浏览器支持你正在寻找 –

对不起，什么是所有的'HideAllShowOne'该怎么办？ –

看起来像'IDvaluesOfEachDiv'中有一些额外的ID检查http://jsfiddle.net/eqs6dy6f/3/ –

如果你是幸福的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>

来源

2015-10-16 09:32:29

http://jsfiddle.net/arunpjohny/7nnfqqb2/ –

我使用的代码在某些浏览器上不支持吗？ – MIke

你想支持多少年的浏览器？ –

我会建议使用jQuery是容易得多。

包括thiswithin

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

来源

2015-10-16 09:33:54 112233

如果你对每一个DIV你的HTML里面“按钮” - 你可以去元素指数

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>

来源

2015-10-16 09:48:13

管理多个显示/隐藏div

回答

相关问题