如何在点击时切换图片并显示div内容?
我期望实现的是当单击图像时,显示的内容和图像更改为另一个图像,并且当再次单击该图像时,图像回复并且内容变为隐藏如何在点击时切换图片并显示div内容?
目前我有这个脚本标签
<script language="javascript" type="text/javascript">
function setVis(id, vis) {
document.getElementById(id).style.display = vis;
}
function swapImage() {
switch (imageNo) {
case 1:
image.src = "images/img.png"
imageNo = 2
return(false);
case 2:
image.src = "images/img1.png"
imageNo = 1
return(false);
}
}
</script>
,这在主HTML页面
<h4><a href="#" onclick="setVis('content','inline');return false;"><img id="image" name="image" src="images/img.png" width="10" height="10" border="0" onclick="swapImage();"/></a> Content</h4>
这不起作用,它显示的内容,但它不会再次隐藏它,并且图像不会改变。
我将不胜感激,可提供的感谢
此代码应该为您做切换。
<head>
<script language="javascript" type="text/javascript">
var imageNo = 2;
function swapImage() {
image = document.getElementById('image')
switch (imageNo) {
case 1:
image.src = "images/img.png"
imageNo = 2
document.getElementById('content').style.display = 'none'
return(false);
case 2:
image.src = "images/img1.png"
imageNo = 1
document.getElementById('content').style.display = 'block'
return(false);
}
}
</script>
</head>
<body>
<h4><a href="#"><img id="image" name="image" src="images/img.png" border="0" onclick="swapImage();"/></a></h4>
<div id="content" style="display:none">This content toggles</span>
</body>
我认为这可能是更容易(恕我直言,因为我讨厌在javascript工作)使用jquery,使用jQuery你可以看看切换功能,使任何帮助你这个功能非常简单。我相信它的整体学习曲线比整齐的JavaScript少。如果您需要任何帮助,请告诉我。
你能指出我的任何教程jQuery的,因为我从来没有之前用过它? – Tom 2011-03-03 21:48:56
http://www.w3schools.com/jquery/default.asp这通常是很好的,它找到DOM元素并添加一个函数(非常基本的总结)的情况比JavaScript更容易imho – 2011-03-04 10:30:59
这里就像dev_musings但与代码少一些行(更多有关Alternate image with javascript onclick按照链接)类似的解决方案:
<script language="javascript" type="text/javascript">
function swapImage() {
var image = document.getElementById('image');
if (image.src == "images/img.png")
{
image.src = "images/img1.png";
document.getElementById('content').style.display = 'none';
}
else
{
image.src = "images/img.png";
document.getElementById('content').style.display = 'block';
}
return(false);
}
</script>
</head>
<body>
<h4><a href="#"><img id="image" name="image" src="images/img.png" border="0" onclick="swapImage();"/></a></h4>
<div id="content" style="display:none">This content toggles</span>
</body>
实际上,您可以删除锚点标记如果你不需要光标作为指针。如果你想要,你可以使用css来将光标悬停在图像上时作为指针。不要忘了选择这个作为答案:) – 2011-03-03 23:39:23
谢谢你得到它的工作 – Tom 2011-03-06 19:05:27
@Tom:请选择此作为答案,因为它为你工作。 – 2011-03-07 02:00:26