如何在点击时切换图片并显示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>

这不起作用，它显示的内容，但它不会再次隐藏它，并且图像不会改变。

我将不胜感激，可提供的感谢

来源

2011-03-03 Tom

此代码应该为您做切换。

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

来源

2011-03-03 23:36:42

实际上，您可以删除锚点标记如果你不需要光标作为指针。如果你想要，你可以使用css来将光标悬停在图像上时作为指针。不要忘了选择这个作为答案:) – 2011-03-03 23:39:23

谢谢你得到它的工作 – Tom 2011-03-06 19:05:27

@Tom：请选择此作为答案，因为它为你工作。 – 2011-03-07 02:00:26

我认为这可能是更容易（恕我直言，因为我讨厌在javascript工作）使用jquery，使用jQuery你可以看看切换功能，使任何帮助你这个功能非常简单。我相信它的整体学习曲线比整齐的JavaScript少。如果您需要任何帮助，请告诉我。

Jquery Toggle

来源

2011-03-03 21:43:45

你能指出我的任何教程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>

来源

2012-10-24 19:59:21 Markweb

如何在点击时切换图片并显示div内容？

回答

相关问题