在同一页面加载弹出消息，不同 HTML 使用多个图像单击的内容

Question

<a href="style1.html" onClick="return popup(this, 'notes')"><img id="myImg1" class="myImgClass1" src="images/1.jpg"></a>

<a href="style2.html" onClick="return popup(this, 'notes')"><img id="myImg2" class="myImgClass2" src="images/2.jpg"></a>

<a href="style3.html" onClick="return popup(this, 'notes')"><img id="myImg3" class="myImgClass3" src="images/3.jpg"></a>


<a href="style4.html" onClick="return popup(this, 'notes')"><img id="myImg4" class="myImgClass4"

 <script type="text/javascript"> </script> <a href="style1.html" onClick="return popup(this, 'notes')"><img id="myImg1" class="myImgClass1" src="images/1.jpg"></a> <a href="style2.html" onClick="return popup(this, 'notes')"><img id="myImg2" class="myImgClass2" src="images/2.jpg"></a> <a href="style3.html" onClick="return popup(this, 'notes')"><img id="myImg3" class="myImgClass3" src="images/3.jpg"></a> <a href="style4.html" onClick="return popup(this, 'notes')"><img id="myImg4" class="myImgClass4" src="images/4.jpg"></a> <!--Hidden Popup html content --> <div id="style1">HTML CONTENT 1 HERE </div> <div id="style2">HTML CONTENT 2 HERE </div> <div id="style3">HTML CONTENT 3 HERE </div> <div id="style4">HTML CONTENT 4 HERE </div>

我已经搜索过，但找不到解决方案。 Onclick 'myImg1' id 我想从同一个 window 中的 'style1' id 加载 html 内容

Onclick 'myImg2' id 我想从相同的 window 中的 'style2' id 加载 html 内容。

样式 1 到 4 div 应该被隐藏并且只能通过弹出窗口加载。 我也很难有一个弹出式关闭按钮。

Answer 1

我不完全明白你想做什么，但这就是你想要的。 您可以运行代码片段并查看结果。

 function popup(id) { document.getElementById(id).style.display = "block"; }

 #a,#b,#c { display:none; color:red; }

 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <a onclick="popup('a')">FIrst</a> <a onclick="popup('b')">Second</a> <a onclick="popup('c')">Third</a> <div id='a' href='#'>This is 1st</div> <div id='b' href='#'>This is 2nd</div> <div id='c' href='#'>This is 3rd</div> </body> </html>

在同一页面加载弹出消息，不同 HTML 使用多个图像单击的内容

问题描述

1 个解决方案

解决方案1
0 2023-01-09 04:48:27

在同一页面加载弹出消息，不同 HTML 使用多个图像单击的内容

问题描述

1 个解决方案

解决方案1 0 2023-01-09 04:48:27

解决方案1
0 2023-01-09 04:48:27