我制作了一些网页，其功能是显示一些图像。对于链接文本，我们当然使用<a href....>，对于图像链接，我们使用<img src....>。
但是如果我想在点击一些链接文本后显示一些图片呢？
<ul>
<li><a href="#"><span>Tulip</span></a></li>
<li><a href="#"><span>Rose</span></a></li>
<li><a href="#"><span>Jasmine</span></a></li>
</ul>
图片文件是
tulip.jpg
rose.jpg
Jasmine.jpg
【问题讨论】：
标签： jquery html image text hyperlink
<a href="http://example.com/tulip.jpg">link text here</a>
【讨论】：
您可以直接链接到图像文件：
<a href="tulip.jpg"><span>Tulip</span></a>
假设tulip.jpg与上面代码的网页在同一目录下。这将加载一个仅显示指定图像的页面。
如果您打算在当前页面上显示图像，则在单击链接后，您需要使用一些 JavaScript 来隐藏/显示它。
更新（基于 cmets）
要在单击链接时在当前页面上显示图像，您可以执行以下操作（JavaScript）：
function showImage(hiddenImgId) {
document.getElementById(hiddenImgId).style.display = "block";
}
与 HTML 类似：
<a href="#" onclick="showImage('hidden1');">Show Image</a>
<div id="hidden1" style="display:none">
<img src="image.jpg" />
</div>
更新基于进一步的 cmets
如果你想使用jQuery，并且图片已经被display:none加载和隐藏，如上图，你可以简单地使用：
$("#imageID").show();
最好的选择可能是让图像默认可见，并在使用 jQuery 加载页面时隐藏它们（下面的代码假定所有要隐藏的图像都有一个 imagesToHide 类）：
$(document).ready(function() {
$(".imagesToHide").hide();
});
这意味着禁用 JavaScript 的任何用户仍将看到图像（因为隐藏它们的代码不会运行），并且大多数启用 JavaScript 的用户将看到预期的页面。
【讨论】：
<div> 中显示。我的意思是这个链接文本看起来像导航，图像将显示在 <div id="content"> 内。
或者你可以创建一个新的html页面，里面有图片+信息。在此解决方案中，您可以设置页面样式，使其更加用户友好且更有趣。
如果您希望用户停留在同一页面上，您还可以使用 lightbox JS 等脚本：
http://www.huddletogether.com/projects/lightbox/ （尝试点击图片）
通常我不会使用指向图片的文本链接。
【讨论】：
您在对@James Allardice 的评论中提到了 jQuery。
你可以这样做：
$('ul li a').click(function(){
var img = $(this).attr('href');
$('#content').html('<img src="' + img + '" />');
return false;
});
HTML
<ul>
<li><a href="tulip.jpg" id="tulip">Tulip</a></li>
<li><a href="rose.jpg" id="rose">Rose</a></li>
<li><a href="jasmine.jpg" id="jasmine">Jasmine</a></li>
</ul>
<div id="content"></div>
【讨论】：
a href="tulip.jpg"。我只是链接了图片以显示它有效。