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

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为页面上的每个图像分配一个事件处理程序(这可能不是您想要的,您可以在必要时进一步限制它),将当前页面更改为images id属性的值加上.html扩展名.它本质上是@JanPöschko的jQuery答案的纯Javascript实现.