Question

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

简单地说，我有：

打开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，它被定位为全屏，然后有一个图像列表，例如＆＃39; {.image1背景图像：网址（../图像/ 1.JPG）}＆＃39;可以浏览的不同图像（gallery.html中的左右可点击箭头）。 HTML将单独使用每个图像，但使用相同的内容持有者，例如

<div class="image-1 holder">

如何为images.html中的每个图片使用相同的gallery.html和gallery-styles.css文件？我并不完全反对JavaScript，但只用CSS3就可以实现这一点，如果可以继续使用HTML5，HTML5会很好。是否有可能使用输入元素？

任何帮助都很棒，谢谢。

Answer 1

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

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

您现在可以使用，例如

进行决策

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

纯 CSS 的另一个选项是使用哈希然后使用: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>

Answer 2

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

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

或者，您以http://myserver.asdf/gallery.php?linkid=12&someotherparam=somevalue

的形式将参数传递给服务器端

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

这会回答你的问题吗？

如何记录按下的链接？

2 个答案: