如何记录按下的链接？

Question

(I don't want to add code here because it would be very large chunks that would need explaining.) （我不想在这里添加代码，因为这将是非常大的块，需要解释。）

To put it simply, I have: 简单地说，我有：

A page with a 2x2 grid of images on (let's call that images.html), 网页上有2x2的图像网格（我们将其称为images.html），
A page that is a fullscreen image gallery made using CSS3 and HTML5 (let's call that gallery.html), 该页面是使用CSS3和HTML5创建的全屏图片库（我们将其称为gallery.html），
A style sheet that styles aspects of every page in the site except the gallery (let's call that main-styles.css), 样式表，用于为网站中除画廊以外的每个页面的各个方面设置样式（我们称其为main-styles.css），
And a style sheet that styles only gallery.html (let's call that gallery-styles.css). 还有一个仅样式化gallery.html的样式表（我们称其为gallery-styles.css）。

The images in the 2x2 grid (images.html) need to open up the same gallery.html using gallery-styles.css. 2x2网格（images.html）中的图像需要使用gallery-styles.css打开相同的gallery.html。 The only difference should be the range of images the fullscreen gallery displays. 唯一的区别应该是全屏画廊显示的图像范围。

So for one image on images.html, it may display 3 images in gallery.html. 因此，对于images.html上的一张图像，它可能在gallery.html中显示3张图像。 But for another image in images.html, it may display 4 entirely different images in gallery.html. 但是对于images.html中的另一个图像，它可能在gallery.html中显示4个完全不同的图像。

The problem I am having is how to track the image link that is clicked in images.html so as to display the different range of images in gallery.html. 我遇到的问题是如何跟踪在images.html中单击的图像链接，以便在gallery.html中显示不同范围的图像。

The gallery-styles.css has a div that is positioned to be fullscreen, then there is an image list, eg '.image1{background-image:url(../images/1.jpg)}' of the different images that can be browsed through (left and right clickable arrows in the gallery.html). gallery-styles.css具有一个位于全屏位置的div，然后有一个图像列表，例如，不同图像的“ .image1 {background-image：url（../ images / 1.jpg）}”可以浏览（在gallery.html中可左右单击的箭头）。 The HTML will use each image individually but with the same content holder, eg HTML将单独使用每个图像，但使用相同的内容所有者，例如

<div class="image-1 holder">

How can I go about using the same gallery.html and gallery-styles.css files for each image in images.html? 如何为images.html中的每个图像使用相同的gallery.html和gallery-styles.css文件？ I'm not entirely against JavaScript but have gone this far with just CSS3 and HTML5 would be nice if it was possible to continue that way. 我并不完全反对JavaScript，但是如果可以继续这样做的话，仅CSS3和HTML5就可以了。 Is there possibly a way using the input element? 有没有可能使用输入元素的方法？

Any help is great, thanks. 任何帮助都很好，谢谢。

Answer 1

For this, I think the easiest way for you would be to use window.location.search . 为此，我认为最简单的方法是使用window.location.search 。 When you click the first image sending you to gallery.html , rather than just opening a regular copy, open for example, gallery.html?image1 . 当您单击第一个图像将您发送到gallery.html ，而不仅仅是打开常规副本，请打开例如gallery.html?image1 。 Then in JavaScript , you can add this as a class to <body> or some other node when the page has loaded, and do the rest from CSS 然后，在JavaScript中 ，您可以在页面加载后将此类作为类添加到<body>或其他某个节点，然后从CSS进行其余操作

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

You can now do the decision making using, for example 现在，您可以使用进行决策

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

A different option for pure CSS is to use a hash and then :target , but this means you lose the ability to have anchors in your page. 纯CSS的另一种选择是使用哈希，然后使用:target ，但这意味着您失去了在页面中具有锚点的能力。 ie open gallery.html#image1 and have 即打开gallery.html#image1并有

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

With some nodes of the form 具有形式的某些节点

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

Answer 2

There are two ways to deal with processing information from the page: client side script (JS) and server side script (PHP or like) unless you have a great number of hand-coded html pages you can load for a corresponding link clicks. 有两种处理页面信息的方法：客户端脚本（JS）和服务器端脚本（PHP等），除非您有大量的手工编码html页面，您可以加载相应的链接单击。

Given that, you either link to your hard-coded page directly from the link, which I assume you have already thought of, 鉴于此，您可以直接从该链接链接到您的硬编码页面，我认为您已经想到了，

Or, you pass a parameter to server side in a form http://myserver.asdf/gallery.php?linkid=12&someotherparam=somevalue 或者，您以http://myserver.asdf/gallery.php?linkid=12&someotherparam=somevalue的形式将参数传递给服务器端

In that case you capture these parameters on server side and generate a page with needed images. 在这种情况下，您可以在服务器端捕获这些参数，并生成包含所需图像的页面。 In php all parameters can be found in $_REQUEST array. 在php中，所有参数都可以在$_REQUEST数组中找到。

Does this answer your question? 这回答了你的问题了吗？

如何记录按下的链接？

问题描述

2 个解决方案

解决方案1
0 2014-01-03 01:53:15

解决方案2
0 2014-01-03 01:53:36

如何记录按下的链接？

问题描述

2 个解决方案

解决方案1 0 2014-01-03 01:53:15

解决方案2 0 2014-01-03 01:53:36

解决方案1
0 2014-01-03 01:53:15

解决方案2
0 2014-01-03 01:53:36