0

我想要 2 个按钮或只有 2 个标签或喜欢来显示/隐藏 2个图像，但彼此独立。我已经为 1 个图像编码，但如果我在 html 中设置两次，它现在不起作用。请参阅JSFiddle。

HTML：

<html>
<head>
<title></title>
</head>
<body>
<p><img height="600" id="map_img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Hsi-h000.png/600px-Hsi-h000.png" style="display: none;" width="600" /> <input id="Mapred" onclick="showImg()" type="submit" value="Mapred" /></p>

<p><img height="800" id="map_img2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Sandro_Botticelli_-_La_nascita_di_Venere_-_Google_Art_Project_-_edited.jpg/800px-Sandro_Botticelli_-_La_nascita_di_Venere_-_Google_Art_Project_-_edited.jpg" style="display: none;" width="502" /> <input id="Map" onclick="showImg2()"     type="submit" value="Map" /></p>
</body>
</html>
4

3 回答 3

0

这是你需要的吗？因为我不完全理解你的问题。

function showImg() {
    document.getElementById("map_img").style.display = "";
}

function showImg2() {
    document.getElementById("map_img2").style.display = "";
}
<p><img height="600" id="map_img"src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Hsi-h000.png/600px-Hsi-h000.png" style="display: none;" width="600" /> 

<input id="Map" onclick="showImg()" type="submit" value="Map" /></p>

<p><img height="600" id="map_img2"src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Hsi-h000.png/600px-Hsi-h000.png" style="display: none;" width="600" /> 

<input id="Map" onclick="showImg2()" type="submit" value="Map" /></p>

于 2016-11-19T20:36:36.347 回答
0

JavaScript 

function showImg() {
            document.getElementById("map_img").style.display = "block";
        }
function hideImg() {
        document.getElementById("map_img").style.display = "none";
    }

jQuery

我已经看到帖子的 JQuery 标签，我会推荐 Javascript，因为它更快并且不需要加载 JQuery，但仍然如此。

$("#map_img").toggle();
$("#map_img").hide();
$("#map_img").show();
For map_img:

$(document).ready(function(){
   $("#button-link").click(function(event){
     //Your actions here
   });
 });
于 2016-11-19T20:57:43.553 回答
0

你可以简单地使用

style.display == 'block'
阻止任何图像或使用

style.display == 'none'

我向您展示了一个完整的示例，以便您理解..

<html>
<body>

<h1>What Can JavaScript Do?</h1>
<div id="myDiv">
	<img id="myImage" src="pic_bulboff.gif" style="width:100px">
</div>


<button onclick="LightOn()">Turn On</button>

<button onclick="LightOff()">Turn Off</button>

<button id="button" onclick="toggle_visibility('myDiv')">Toggle</button>


<script type="text/javascript">
	function LightOn(){
		document.getElementById('myImage').src='pic_bulbon.gif'
	}
	
	function LightOff(){
		document.getElementById('myImage').src='pic_bulboff.gif'
	}
	
	function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'block')
          e.style.display = 'none';
        else
          e.style.display = 'block';
	}

</script>

</body>
</html>

于 2016-11-19T21:04:13.610 回答