Javascript 显示区域切换

Question

在不使用 jQuery 的情况下，我想在打开时显示一个 div(单个)，然后单击一个图像(加号)链接以关闭“单个”并打开另一个 div(多个)。同时图像“加”是变化(减)。单击“减号”图像将关闭“多”div，打开“单”div 并将图像更改为“加号”。

我在网上找到了一个示例，它让我完成了一半，但我似乎无法弄清楚如何在打开时隐藏“多”，然后在单击图像时隐藏“单”。 “单个”div 切换正常，但我似乎无法将“多个”集成到我的代码中。我将图像显示在本不应出现的 div 中，否则“多”div 不会切换。

<style type="text/css">
#headerDivImg, #contentDivImg, #contentDivImg_, #contentDivImg1, #contentDivImg1_ {
    float: left;
    width: 510px;
    background-color: #FFE694;
    text-align: center;
}
#titleTextImg {
    float: left;
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px;
}
#imageDivLink {
    float: right;
}
#headerDivImg {
    background-color: #0037DB;
    color: #9EB6FF;
}
#contentDivImg, #contentDivImg_, contentDivImg1, #contentDivImg1_ {
    background-color: #FFE694;
    text-align: center;
}
#headerDivImg img {
    float: right;
    margin: 10px 10px 5px 5px;
}
</style>

<script type="text/javascript">
function toggle5(showHideDiv, switchImgTag) {
    var ele = document.getElementById(showHideDiv);
    var imageEle = document.getElementById(switchImgTag);
    if(ele.style.display == "block") {
        ele.style.display = "none";
        imageEle.innerHTML = '<img src="images/minus.png">';
    }
    else {
        ele.style.display = "block";
        imageEle.innerHTML = '<img src="images/plus.png">';
    }
}
</script>

<div id="headerDivImg">
    <div id="titleTextImg">Click to toggle</div>
    <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'contentDivImg1', 'imageDivLink');"><img src="images/plus.png"></a>
</div>
<br />
<br />
<div id="contentDivImg" style="display: block;">single</div>
<br />
<div id="contentDivImg1" style="display: block;">multi</div>

Answer 1

如果您的代码可以在 JSFidle 中看到，我做了很多更改.

HTML:

<div id="headerDivImg">
    <div id="titleTextImg">Click to toggle</div>
    <a id="imageDivLink" href="#">
        <img />
    </a>
</div>
<br />
<br />
<div id="contentDivImg">single</div>
<br />
<div id="contentDivImg1">multi</div>

JS:

//Toggle button
var btnToggle = document.getElementById('imageDivLink');

//Container one
var divSingle = document.getElementById('contentDivImg');

//Container two
var divMultip = document.getElementById('contentDivImg1');

// Toggle button click event handler.
btnToggle.onclick = function(e){
    //Check if open single
    var showSingle =  btnToggle.classList.contains('open');
    if (showSingle){
        divSingle.classList.add('open');
        btnToggle.classList.remove('open');
        divMultip.classList.remove('open');
    }else{
        divSingle.classList.remove('open');
        btnToggle.classList.add('open');
        divMultip.classList.add('open');
    }
};

CSS:

#headerDivImg, #contentDivImg, #contentDivImg_, #contentDivImg1, #contentDivImg1_ {
    float: left;
    width: 510px;
    background-color: #FFE694;
    text-align: center;
}
#titleTextImg {
    float: left;
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px;
}
#imageDivLink {
    float: right;
}
#headerDivImg {
    background-color: #0037DB;
    color: #9EB6FF;
}
#contentDivImg, #contentDivImg_, contentDivImg1, #contentDivImg1_ {
    background-color: #FFE694;
    text-align: center;
}

#contentDivImg {    display: none;}
#contentDivImg.open {    display: block;}

#contentDivImg1 {    display: none;}
#contentDivImg1.open {    display: block;}

#imageDivLink img {
    float: right;
    margin: 10px 10px 5px 5px;
    content:url("http://blendme.in/psds/brankic1979/plus%20transparent%20.png"); 
}

#imageDivLink.open img {
    content:url("http://blendme.in/psds/brankic1979/minus%20transparent.png"); 
}

JSFiddle