Javascript 使用div显示和隐藏图像_Javascript_Hide_Show

Javascript 使用div显示和隐藏图像

javascript

Javascript 使用div显示和隐藏图像,javascript,hide,show,Javascript,Hide,Show,好的，我想编辑这个代码，所以如果我按下按钮1，它首先显示一个图像，然后如果我再次按下按钮1，它应该隐藏图像。所有按钮也是如此。我想知道是否有人可以重写我的脚本，使之成为可能 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo</tit

好的，我想编辑这个代码，所以如果我按下按钮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>


-JSFIDLE演示
.隐藏{
显示：无；
}
//  
按钮1
按钮2
按钮3
按钮4
文本4

最快的方法是使用jQuery并查看其toggle（）函数。否则..可能会将按钮的状态存储为布尔值，并根据值有条件地隐藏/显示

完整示例：

jQuery有一个应该可以工作的隐藏和显示方法。例如：

$('id1').hide()

考虑jQuery并使用jQuery .ToGLCGLASS和.Lead类。Tsalikidi是否介意为我更改代码？：）我有点困惑。我有点不确定把jQuery代码放在哪里。你应该把代码放在哪里取决于你最后需要实现什么。我不能知道这一点，所以我只给你一个一般的例子。

$('id1').hide()