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

Question

我怎样才能做到一次只显示一个格？ 我尝试添加“ 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>

Answer 1

最好在HTML中添加一个类，然后再按其类抓取div。 然后，您可以遍历元素以隐藏所有元素，然后取消隐藏您单击的元素。

例：

 var arrProducts = document.getElementsByClassName('product'); for (i = 0; i < arrProducts.length; i++) { arrProducts[i].style.display = 'none'; } function showImage(id) { for (i = 0; i < arrProducts.length; i++) { if (id == arrProducts[i].id) { if (document.getElementById(id).style.display === 'none') { arrProducts[i].style.display = 'block'; } else { arrProducts[i].style.display = 'none'; } } else { arrProducts[i].style.display = 'none'; } } } 

 h5 { cursor: pointer; } .product img { height: 10px; width: 10px; } 

 <h5 onclick="showImage('chair');">Chair</h5> <h5 onclick="showImage('table');">Table</h5> <h5 onclick="showImage('long_table');">Meeting Table</h5> <div class="product" id="chair"> <img src="images/1.jpg" height="300px" /> <h4>Product 1 (Chair)</h4> </div> <div class="product" id="table"> <img src="images/2.jpg" height="300px" /> <h4>Product 2 (Table)</h4> </div> <div class="product" id="long_table"> <img src="images/3.jpg" height="300px" /> <h4>Product 3 (Meeting Table)</h4> </div> 

Answer 2

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

    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 = "";
        }
    }

Answer 3

虽然这不能帮助您解决当前代码中的问题，但实际上您可以通过滥用单选按钮来执行此操作而无需任何JavaScript。 这很普遍。

http://jsfiddle.net/mo7yppp8/

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

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

然后，您只需要一些CSS即可隐藏单选按钮，而另一些则可以缩小div，而这在经过检查的输入之后并不正确。

.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;
}

Answer 4

如果您有机会使用jQuery，那么可能会有一个非常出色的解决方案。 它将像这样工作：

http://jsfiddle.net/dnf6gsuL/2/

<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>

Answer 5

尝试替代longtable为long_table在“会议桌” h5

 var showImage = function 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(function(el) { el.style.display = "none"; }) }; 

 div[id] { display: none; } 

 <h5 onclick="showImage('chair')">Chair</h5> <h5 onclick="showImage('table')">Table</h5> <h5 onclick="showImage('longtable')">Meeting Table</h5> <div id="chair"> <img src="images/1.jpg" height="300px" alt="chair" /> <h4>Product 1</h4> </div> <div id="table"> <img src="images/2.jpg" height="300px" alt="table" /> <h4>Product 2</h4> </div> <div id="longtable"> <img src="images/3.jpg" height="300px" alt="meeting table" /> <h4>Product 3</h4> </div>