[英]How can I hide one div before opening another?
How can I make it so that only one div can be shown at a time? 我怎样才能做到一次只显示一个格? I've tried adding "document.getElementById(currentID).style.display='none';" 我尝试添加“ document.getElementById(currentID).style.display ='none';” in the after the else but that doesn't work. 在其他情况下,但这是行不通的。
<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>
Better to add a class to your HTML and then grab the divs by their class. 最好在HTML中添加一个类,然后再按其类抓取div。 You can then loop through the elements to hide them all and then un-hide the one you've clicked. 然后,您可以遍历元素以隐藏所有元素,然后取消隐藏您单击的元素。
Example: 例:
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>
You need to rethink the logic of your function, I'm guessing this is what you meant: 您需要重新考虑函数的逻辑,我猜这是您的意思:
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 = "";
}
}
While this won't help you fix things in you current code, you can actually do this without any JavaScript by abusing radiobuttons. 虽然这不能帮助您解决当前代码中的问题,但实际上您可以通过滥用单选按钮来执行此操作而无需任何JavaScript。 This is quite common. 这很普遍。
http://jsfiddle.net/mo7yppp8/ http://jsfiddle.net/mo7yppp8/
Each div needs a radio button above it, and to be enclosed within a label. 每个div上方都需要一个单选按钮,并应将其包含在标签中。 This way, clicking on the div will trigger the radiobutton, deselecting any other div in the process. 这样,单击div将触发单选按钮,取消选择该过程中的任何其他div。
<label>
<input class="divSelector" type="radio" name="divSelector" value="" />
<div>Sample text</div>
</label>
Then, all you need is some CSS to hide the radiobuttons, and some to shrink the divs which aren't right after a checked input. 然后,您只需要一些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;
}
If you have the chance to use jQuery, there is a really awesome solution possible. 如果您有机会使用jQuery,那么可能会有一个非常出色的解决方案。 It would work like this: 它将像这样工作:
http://jsfiddle.net/dnf6gsuL/2/ 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>
Try substituting longtable
for long_table
at "Meeting Table" h5
尝试替代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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.