0

在不使用 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>
4

2 回答 2

0

如果您可以在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

于 2013-10-17T10:29:29.163 回答
0

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

        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>
于 2013-10-17T10:32:42.290 回答