如何在點擊時切換圖片並顯示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內容？

回答

相關問題