如何記錄按下的鏈接？

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，然后有一個圖像列表，例如，不同圖像的“ .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就可以了。 有沒有可能使用輸入元素的方法？

任何幫助都很好，謝謝。

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 個解決方案

解決方案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