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

Answer 2

试试这个代码......

        var key = 0;
        function toggle() {
            if (key == 0) {
                document.getElementById('imageDivLink').innerHTML = "<img src="images/minus.png">";
                document.getElementById("contentDivImg").style.display = "none";
                document.getElementById("contentDivImg1").style.display = "block";
                key = 1;
            } else {
                document.getElementById('imageDivLink').innerHTML = "<img src="images/plus.png">";
                document.getElementById("contentDivImg").style.display = "block";
                document.getElementById("contentDivImg1").style.display = "none";
                key = 0;
            }
        }
<div id="headerDivImg">
<div id="titleTextImg">Click to toggle</div>
<a id="imageDivLink" href="javascript:toggle();"><img src="images/plus.png"></a>
</div>
<br />
<br />
<div id="contentDivImg" style="display: block;">single</div>
<br />
<div id="contentDivImg1" style="display: none;">multi</div>

Javascript显示区域切换

2 个答案:

JSFiddle