Javascript 管理多个显示/隐藏div_Javascript_Html_Css

Javascript 管理多个显示/隐藏div

javascript html css

Javascript 管理多个显示/隐藏div,javascript,html,css,Javascript,Html,Css,我这里有一些脚本在单击时显示和隐藏div。现在我需要的是一次只显示一个div。我有一个控制它们的代码，但它不起作用，我对javascript知之甚少这是显示/隐藏函数的第一个示例，它可以同时执行，而无需隐藏其他div 拨弄 HTML: 内容在这里内容在这里脚本： function HideContent(d) { document.getElementById(d).style.display = "none"; } function ShowContent(d) {

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

这是显示/隐藏函数的第一个示例，它可以同时执行，而无需隐藏其他

div

拨弄

HTML:


内容在这里
内容在这里

脚本：

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

函数隐藏内容（d）{
document.getElementById（d）.style.display=“无”；
}
功能显示内容（d）{
document.getElementById（d）.style.display=“block”；
}
功能反转显示（d）{
if（document.getElementById（d.style.display==“无”）{
document.getElementById（d）.style.display=“block”；
}否则{
document.getElementById（d）.style.display=“无”；
}
}
函数HIDEALSHOWONE（d）{
//在引号之间，列出每个div的id值。
var IDvaluesOfEachDiv=“idone idtwo uniquename1 uniquename”；
//-------------------------------------------------------------
IDvaluesOfEachDiv=IDvaluesOfEachDiv。替换（/[，\s“]/g，”）；
IDvaluesOfEachDiv=IDvaluesOfEachDiv.replace（/^\s*/，“”）；
IDvaluesOfEachDiv=IDvaluesOfEachDiv.替换（/\s*$/，“”）；
IDvaluesOfEachDiv=IDvaluesOfEachDiv.替换为（+/+/g，“”）；
var IDlist=IDvaluesOfEachDiv.split（“”）；
对于（var i=0；i如果您对IE10+支持感到满意，那么

功能反转显示（d）{
var els=document.querySelectorAll（'.toggle.active:not（#'+d+'））；
对于（变量i=0；i

.toggle{
显示：无；
}
.toggle.active{
显示：块；
}

内容在这里
内容在这里
我建议使用jQuery，这要简单得多
包括在
<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>

如果HTML中的每个DIV都有一个“按钮”，那么可以按元素索引

var btn=document.queryselectoral（“.btn”）；
var div=document.queryselectoral（“.ele”）；
函数toggleDivs（）{
对于（var i=0；i您正在寻找的浏览器支持是什么？对不起，所有的隐藏显示功能应该做什么？看起来您在每个HDIV的IDValues中都有一些额外的id检查我想这是一个显示一个部分然后隐藏当前打开的div的功能。但是它不起作用。我将附加c的参考页ode.我使用的代码在某些浏览器上不支持吗？你想支持多旧的浏览器？@MichaelPon如果是这样，就足够了，请看@ArunPJohny，我有一个问题，你能回答吗？你是我知道的可靠专家，这就是为什么：
<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>

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