Question

如何制作它，以便一次只能显示一个div？我已尝试添加＆＃34; document.getElementById（currentID）.style.display =＆＃39; none＆＃39;;＆＃34;在其他人之后，但那不起作用。

<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。然后，您可以遍历元素以隐藏所有元素，然后取消隐藏您单击的元素。

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

虽然这不会帮助您解决当前代码中的问题，但实际上您可以通过滥用单选按钮来实现此目的。这很常见。

http://jsfiddle.net/mo7yppp8/

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

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

然后，你需要的只是一些CSS来隐藏radiobuttons，还有一些是为了缩小在检查输入后不正确的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在＆＃34;会议桌＆＃34; h5

＆＃13;

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

＆＃13;

div[id] {
  display: none;
}

＆＃13;

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

＆＃13;

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

5 个答案: