Question

我有一个问题，我可能只是在思考。所以我在页面上有三个链接。所有三个链接都将打开相同的HTML页面。唯一的问题是我想根据点击的链接显示不同的图像。

我不想创建同一页面的三种不同变体，所以有没有办法动态地执行此操作（也许是Javascript？）

任何帮助将不胜感激。

谢谢！

Answer 1

我能想象到最简单的方法就是在原始页面的<a>元素的URL中使用哈希：

<a class="imgClass" href="http://example.com/path/to/page.html#imgOne">Link to show image one</a>
<a class="imgClass" href="http://example.com/path/to/page.html#imgTwo">Link to show image two</a>
<a class="imgClass" href="http://example.com/path/to/page.html#imgThree">Link to show image three</a>

在接收页面中，CSS：

/* selects the relevant images: */
.imgClass {
    /* hides them: */
    display: none;
}

/* selects the image whose id appears in the URL: */
.imgClass:target {
    /* shows that image: */
    display: inline-block;
}

参考：

:target pseudo-class。

Answer 2

使用查询参数。

链接1可能指向/page?link=1，链接2可能指向/page?link=2，依此类推。您可能想要概括为＆＃34;应该显示哪种图像，＆＃34;但你得到了要点。如果没有参数，请不要忘记包含一些默认值。

为了记录，您通常会处理查询并选择图像服务器端，但是也可以在JavaScript中执行。

Answer 3

由于我假设您没有使用任何服务器端脚本，您可以将查询字符串参数从一个页面传递到另一个页面。

假设第二个页面的名称是images.html，您可以将链接调用为images.html？img = 1或images.html？img = 2等，在页面上您需要使用javascript来读取查询字符串基于img值，您可以加载不同的图像。检查此stackoverflow以获取详细信息

How can I get query string values in JavaScript?

一个带动态内容的样式化HTML页面

3 个答案: