如何记录按下的链接？答案

【问题标题】：How can I record the link pressed?如何记录按下的链接？
【发布时间】：2014-01-03 20:24:41
【问题描述】：

（我不想在这里添加代码，因为这将是需要解释的非常大的块。）

简单地说，我有：

一个带有 2x2 网格图像的页面（我们称之为 images.html），
使用 CSS3 和 HTML5 制作的全屏图片库页面（我们称之为 gallery.html），
一个样式表，用于设置网站中除图库之外的每个页面的各个方面（我们称之为 main-styles.css），
还有一个只有gallery.html 样式的样式表（我们称之为gallery-styles.css）。

2x2 网格 (images.html) 中的图片需要使用 gallery-styles.css 打开相同的 gallery.html。唯一的区别应该是全屏画廊显示的图像范围。

所以对于images.html 上的一张图片，它可能会在gallery.html 中显示3 张图片。但对于 images.html 中的另一张图片，它可能会在 gallery.html 中显示 4 张完全不同的图片。

我遇到的问题是如何跟踪在images.html中点击的图片链接，以便在gallery.html中显示不同范围的图片。

gallery-styles.css 有一个定位为全屏的 div，然后有一个图像列表，例如'.image1{background-image:url(../images/1.jpg)}' 可以浏览的不同图像（gallery.html 中的左右可点击箭头）。 HTML 将单独使用每个图像，但具有相同的内容持有者，例如

<div class="image-1 holder">

如何为 images.html 中的每个图像使用相同的 gallery.html 和 gallery-styles.css 文件？我并不完全反对 JavaScript，但仅使用 CSS3 已经走到了这一步，如果可以继续这种方式，HTML5 会很好。有没有办法使用输入元素？

任何帮助都很好，谢谢。

【问题讨论】：

标签： javascript css html image-gallery

【解决方案1】：

有两种方法可以处理来自页面的信息：客户端脚本 (JS) 和服务器端脚本（PHP 或类似），除非您有大量可以为相应链接加载的手工编码的 html 页面点击。

鉴于此，您可以直接从链接链接到您的硬编码页面，我假设您已经想到了，

或者，您以http://myserver.asdf/gallery.php?linkid=12&someotherparam=somevalue 的形式将参数传递给服务器端

在这种情况下，您可以在服务器端捕获这些参数并生成包含所需图像的页面。在php中所有参数都可以在$_REQUEST数组中找到。

这能回答你的问题吗？

【讨论】：

【解决方案2】：

为此，我认为最简单的方法是使用window.location.search。当您单击将您发送到gallery.html 的第一张图片时，而不是仅仅打开常规副本，例如打开gallery.html?image1。然后在 JavaScript 中，您可以在页面加载后将其作为 class 添加到 <body> 或其他节点，然后从 CSS em>

window.addEventListener(
    'load',
    function () {document.body.className += ' '+window.location.search.slice(1)}
);

您现在可以使用例如

body > genericNodes {display: none; }
body.image1 > someNode { display: block; }
/* etc */

纯 CSS 的另一种选择是使用 hash，然后使用 :target，但这意味着您无法在页面中添加锚点。即打开gallery.html#image1 并拥有

#image1, #image2, #image3, #image4 { display: none; }
:target { display: block !important; }
/* etc */

带有表单的一些节点

<span id="image1"><!-- contents --></span>
<span id="image2"><!-- contents --></span>

【讨论】：