使用div显示和隐藏图像
使用div显示和隐藏图像
提问于 2014-08-05 04:53:49
好的，我想编辑这个代码，例如，如果我按下按钮1，它首先会显示一个图像，然后如果我再次按下按钮1，它应该会隐藏图像。所有按钮也是如此。我想知道是否有人可以重写我的脚本，使之成为可能。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.hidden {
display: none;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
window.show = function(elementId) {
var elements = document.getElementsByTagName("div");
for (var i = 0; i < elements.length; i++)
elements[i].className = "hidden";
document.getElementById(elementId).className = "";
}
}//]]>
</script>
</head>
<body>
<button type="button" onclick="show('id1');" >Button 1</button>
<button type="button" onclick="show('id2');" >Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>
<button type="button" onclick="show('id4');">Button 4</button>
<div id="id1" class="hidden"><img src="alfagel.gif" height="280" width="120"/></div>
<div id="id2" class="hidden"><img src="alfagel.gif" height="280" width="120"/></div>
<div id="id3" class="hidden"><img src="bjorktrast.gif" height="280" width="120"/></div>
<div id="id4" class="hidden">text 4</div>
</body>
</html>回答 3
Stack Overflow用户
发布于 2014-08-05 05:19:20
Import jQuery
Use $.fn.toggleClass
$('div').toggleClass('hidden');完整示例：http://jsfiddle.net/sLLL7/
Stack Overflow用户
发布于 2014-08-06 02:01:14
jQuery有一个应该可以工作的隐藏和显示方法。示例：
$('id1').hide()Stack Overflow用户
发布于 2014-08-05 05:04:54
要做到这一点，最快的方法是使用jQuery并查看它的toggle()函数。Otherwise..perhaps将按钮的状态存储为boo leans，并根据该值有条件地隐藏/显示按钮。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25127360
复制相关文章
相似问题
腾讯云开发者
