Question

我正在使用Javascript热身，所以我正在尝试自己的东西。我正在搜索onclick函数，我在index.html页面中有缩略图图像，每当用户单击图像时，他将被重定向到新页面，其中图像再次显示以及有关它的一些信息。现在我正在使用纯HTML。

我想使用javascript导航到与用户点击的图像对应的页面。使用onclick可以吗？我的网页上有超过10张图片，每次用户点击图片时我想获取该图片的ID并将其重定向到新页面。新页面以图像名称命名。

对于前：图片名称：bottle.jpg（驻留在images文件夹中）重定向页面名称：bottle.html（驻留在主文件夹中）

<a href="bottle.html" id="bottle" ><img src="../images/bottle.jpg" alt="bottle" class="thumbnails" /></a>

任何有价值的信息都将受到赞赏！

如果在这个论坛中提到某个地方，如果有人可以给我这个链接会很有帮助。

谢谢， Raaks

Answer 1

也许这就是你想要的？

<a href="#" id="bottle" onclick="document.location=this.id+'.html';return false;" >
    <img src="../images/bottle.jpg" alt="bottle" class="thumbnails" />
</a>

编辑：请记住，任何没有启用javascript的人都无法访问图片页面....

Answer 2

因为它使这些事情变得如此简单，您可以考虑使用像jQuery之类的JavaScript库来执行此操作：

<script>
    $(document).ready(function() {
        $('img.thumbnail').click(function() {
            window.location.href = this.id + '.html';
        });
    });
</script>

基本上，它会将onClick事件附加到具有类thumbnail的所有图像，以重定向到相应的HTML页面（id + .html）。然后，您只需要HTML中的图像（没有a元素），如下所示：

<img src="bottle.jpg" alt="bottle" class="thumbnail" id="bottle" />
<img src="glass.jpg" alt="glass" class="thumbnail" id="glass" />

Answer 3

我会像这样设置你的HTML：

<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" id="bottle" />

然后使用以下代码：

<script>
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++) {
    var image = images[i];
    image.onclick = function(event) {
         window.location.href = this.id + '.html';
    };
}
</script>

为页面上的每个图像分配onclick事件处理程序（这可能不是您想要的，您可以在必要时进一步限制它），将当前页面更改为图像的值{{1 }}属性加上id扩展名。它本质上是@JanPöschko的jQuery答案的纯Javascript实现。

Answer 4

您可以定义单击函数，然后为元素设置onclick属性。

function imageClick(url) {
    window.location = url;
}

<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" onclick="imageClick('../images/bottle.html')" />

这种方法可以让你摆脱周围的<a>元素。如果您想保留它，请在onclick而不是<a>上定义<img>属性。

单击图像以使用Javascript导航到另一个页面

4 个答案: