Javascript 如何在打开另一个div之前隐藏一个div？

如何使一次只能显示一个div？我尝试在else后面添加“document.getElementById（currentID.style.display='none'；”，但这不起作用

<h5 onclick="showImage('chair')">Chair</h5>
<h5 onclick="showImage('table')">Table</h5>
<h5 onclick="showImage('long_table')">Meeting Table</h5>

<div id="chair">
    <img src="images/1.jpg" height="300px"/>
    <h4>Product 1</h4>
</div>

<div id="table">
    <img src="images/2.jpg" height="300px"/>
    <h4>Product 2</h4>
</div>

<div id="longtable">
    <img src="images/3.jpg" height="300px"/>
    <h4>Product 3</h4>
</div>

<script type="text/javascript">
        var currentID = "";
        function showImage(id){
            if(currentID == id){
                document.getElementById(id).style.display='none';
                currentID = "";
            }else{
                document.getElementById(id).style.display='block';
                currentID = id;
            }
        }
</script>

椅子
桌子
会议桌
产品1
产品2
产品3
var currentID=“”；
函数showImage（id）{
如果（当前id==id）{
document.getElementById（id.style.display='none'；
currentID=“”；
}否则{
document.getElementById（id.style.display='block'；
currentID=id；
}
}

您需要重新思考函数的逻辑，我猜这就是您的意思：

    var currentID = "";
    function showImage(id){
        if(currentID != id){
            if (currentID != "") // added this test in response to JFK's comment
                document.getElementById(currentID).style.display='none';
            document.getElementById(id).style.display='block';
            currentID = id;
        }
        else { // added after OP clarified the question
            document.getElementById(id).style.display='none';
            currentID = "";
        }
    }

---

最好在HTML中添加一个类，然后按类抓取div。然后，您可以在元素之间循环以隐藏所有元素，然后取消隐藏您单击的元素

例如：

var arrProducts=document.getElementsByClassName（'product'）；
对于（i=0；i<0.length；i++）{
arrProducts[i].style.display='none'；
}
函数showImage（id）{
对于（i=0；i<0.length；i++）{
if（id==arrProducts[i].id）{
if（document.getElementById（id.style.display=='none'）{
arrProducts[i].style.display='block'；
}否则{
arrProducts[i].style.display='none'；
}
}否则{
arrProducts[i].style.display='none'；
}
}
}

h5{
光标：指针；
}
.产品img{
高度：10px；
宽度：10px；
}

椅子
桌子
会议桌
产品1（主席）
产品2（表）
产品3（会议桌）

虽然这不能帮助您修复当前代码中的问题，但您实际上可以通过滥用单选按钮在不使用任何JavaScript的情况下完成这项工作。这是很常见的

每个div都需要在其上方有一个单选按钮，并封装在标签中。这样，单击div将触发radiobutton，取消选择过程中的任何其他div

<label>
    <input class="divSelector" type="radio" name="divSelector" value="" />
    <div>Sample text</div>
</label>

---

如果您有机会使用jQuery，那么有一个非常棒的解决方案。它的工作原理如下：

椅子
产品1
桌子
产品2
会议桌
产品3
$（“h5”）。单击（功能（eve）{
$（“div”）。每个（函数（）{
$（this.fadeOut（“fast”，function（））{
美元（eve.target）.next（“div”）.fadeIn（“fast”）；
});
});
});

在“会议桌”

h5

var showImage=函数showImage（id）{
var active=document.getElementById（id）；
active.style.display='block'；
var notActive=document.querySelectorAll（“div:not（#“+active.id+”）；
Array.prototype.slice.call（notActive）
.forEach（功能（el）{
el.style.display=“无”；
})
};
div[id]{
显示：无；
}
椅子
桌子
会议桌
产品1
产品2
产品3
您的元素实际上没有ID，您应该有一个ID才能使代码正常工作。他们正在使用ID更改其他div“他们正在使用ID更改其他div”。可以包含“其他div”的
html
？@JFK我需要它，因此在开始时没有显示图像，如果我单击“Chair”之类的链接，将显示id为Chair的div。如果我单击“表”，则椅子div将隐藏，而表div将显示。但如果我在表格已经显示时单击“表格”，它只会将其隐藏。我没有回答，但这是我理解的，因为第一次单击时，
currentID
为
null
。。。然后再也不匹配只要修改你的输入错误，你就可以完成一半的请求了（请参阅评论和接受的答案）。@Tom我已经根据你在评论中添加的额外信息对其进行了更新。@Jamie_Barker非常感谢：D
.divSelector {
    display: none;
}

.divSelector:checked + div {
    font-size: 12pt;
}

div {
    font-size: 0pt;
    background-color: blue;
    color: white;
    overflow: clip;
    padding: 2em;
    height: 12px;
}

div:hover {
    background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>



    <h5>Chair</h5>
    <div>
        <img src="images/1.jpg" height="300px"/>
        <h4>Product 1</h4>
    </div>
    <h5>Table</h5>
    <div>
        <img src="images/2.jpg" height="300px"/>
        <h4>Product 2</h4>
    </div>
    <h5 id="longtable">Meeting Table</h5>
    <div>
        <img src="images/3.jpg" height="300px"/>
        <h4>Product 3</h4>
    </div>

<script>

    $("h5").click(function(eve){
        $("div").each(function(){
            $(this).fadeOut("fast", function(){
                $(eve.target).next("div").fadeIn("fast");
            });
        });

    });
</script>