展开链接以在不使用 javascript 的情况下显示图像答案

【问题标题】：Expand a link to show image without using javascript展开链接以在不使用 javascript 的情况下显示图像
【发布时间】：2010-10-11 00:02:40
【问题描述】：

我有一个包含一些文本和链接的页面。我想在单击这些链接时在其中显示图像。但是，我必须完全不使用 javascript。我只能使用一些服务器端组件，例如 PHP。谢谢

【问题讨论】：

【解决方案1】：

由于您在评论中声明您不想重新加载页面并且不能使用 Ajax，因此 PHP 不会帮助您，因为它运行在服务器上。相反，您可以使用 CSS 实现您想要的。看看this simple demo。

基本上，您将图像放在链接中：

<a href="#img1">link text <img src="..."></a>

然后在您的 CSS 中指定如下内容：

a img {display:none}
a:visited img {display:inline}

所以图片默认是隐藏的，但是一旦用户点击链接，图片就会显示出来。如果您的页面上有多个图像，则必须为每个链接分配不同的 href 锚：

<a href="#img1">link text <img src="..."></a>
<a href="#img2">link text <img src="..."></a>

这种方法的一个潜在问题是，一旦用户显示了特定图像，默认情况下，该图像也会在该用户随后访问该页面时显示，除非他清除浏览器历史记录。如果您想防止这种情况发生，即默认情况下始终隐藏所有图像，那么，例如，您的 PHP 代码每次都可以生成随机的 href 锚点。

【讨论】：

【解决方案2】：

这是完全可能的，但您必须容忍这样一个事实，即当用户点击链接时，页面必须重新加载才能显示图像。

所以，基本上，您的链接将是这样的：

然后你的 PHP 将包含一个 IMG 标记以用于适当的图像，可能是这样的：

$id = $_GET['id'];
echo "<img src='/images/image_$id.jpg'>\n";

如果您能够使用 Javascript，则无需重新加载页面即可使其工作，但除此之外，使用 PHP 应该没问题。

【讨论】：