Javascript 显示区域切换

Javascript display area toggle

本文关键字：区域 显示 Javascript      更新时间：2023-09-26

在不使用jQuery的情况下，我想在打开时显示一个div（单），然后单击图像（加号）链接以关闭"single"并打开另一个div（多）。同时，图像"加号"将更改（减号）。单击"减号"图像将关闭"多"div，打开"单个"div并将图像更改为"加号"。

我在网络上找到了一个示例，它让我走到了一半，但我似乎无法弄清楚如何在打开时隐藏"多"，然后在图像单击时隐藏"单"。"单个"div 切换正常，但我似乎无法将"multi"集成到我的代码中。我让图像显示在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>

如果你的代码，我做了很多更改，你可以在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

试试这个代码....

        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>
相关文章：