onclick 图像以使用 Javascript 导航到另一个页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8536653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onclick on a image to navigate to another page using Javascript
提问by 125369
I am getting warmed up with Javascript so I am trying something on my own. I am searching for a onclick function, where I have thumbnail images in my index.html page, and whenever a user clicks the image he will be redirected to a new page where the image is again displayed along with some information about it. Right now I am doing it using just plain HTML.
我对 Javascript 热身，所以我正在尝试自己的东西。我正在搜索一个 onclick 函数，在我的 index.html 页面中有缩略图，每当用户单击图像时，他将被重定向到一个新页面，该页面将再次显示该图像以及有关它的一些信息。现在我只使用纯 HTML 来做这件事。
I want to use javascript to navigate to the page corresponding to the image the user has clicked. Is that possible to do using onclick? I have more than 10 images on my webpage and each time a user clicks an image I want to get the id of that image and redirect it to the new page. The new page is named after the image name.
我想使用 javascript 导航到与用户单击的图像对应的页面。使用onclick可以做到吗？我的网页上有 10 多个图像，每次用户单击图像时，我都想获取该图像的 id 并将其重定向到新页面。新页面以图像名称命名。
For ex: image name: bottle.jpg (residing in the images folder) redirect page name: bottle.html (residing in the main folder)
例如：图像名称：bottle.jpg（驻留在图像文件夹中）重定向页面名称：bottle.html（驻留在主文件夹中）
<a href="bottle.html" id="bottle" ><img src="../images/bottle.jpg" alt="bottle" class="thumbnails" /></a>
Any valuable information will be appreciated!
任何有价值的信息将不胜感激！
If it is somewhere asked in this forum, it would be helpful if somebody can give me that link.
如果在这个论坛的某个地方有人问过，如果有人能给我那个链接会很有帮助。
Thanks, Raaks
谢谢，拉克斯
回答by Johnny Craig
maybe this is what u want?
也许这就是你想要的？
<a href="#" id="bottle" onclick="document.location=this.id+'.html';return false;" >
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" />
</a>
edit: keep in mind that anyone who does not have javascript enabled will not be able to navaigate to the image page....
编辑：请记住，没有启用 javascript 的任何人都将无法导航到图像页面....
回答by Jan P?schko
Because it makes these things so easy, you could consider using a JavaScript library like jQueryto do this:
因为它让这些事情变得如此简单，你可以考虑使用像jQuery这样的 JavaScript 库来做到这一点：
<script>
$(document).ready(function() {
$('img.thumbnail').click(function() {
window.location.href = this.id + '.html';
});
});
</script>
Basically, it attaches an onClickevent to all images with class thumbnailto redirect to the corresponding HTML page (id+ .html). Then you only need the images in your HTML (without the aelements), like this:
基本上，它将onClick事件附加到所有带有 class 的图像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" />
回答by Anthony Grist
I'd set up your HTML like so:
我会像这样设置你的 HTML：
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" id="bottle" />
Then use the following code:
然后使用以下代码：
<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>
That assigns an onclickevent handler to every image on the page (this may not be what you want, you can limit it further if necessary) that changes the current page to the value of the images idattribute plus the .htmlextension. It's essentially the pure Javascript implementation of @JanP?schko's jQuery answer.
这会onclick为页面上的每个图像分配一个事件处理程序（这可能不是您想要的，如果需要，您可以进一步限制它），将当前页面更改为图像id属性加上.html扩展名的值。它本质上是@JanP?schko 的 jQuery 答案的纯 Javascript 实现。
回答by Hristo
You can define a a click function and then set the onclickattribute for the element.
您可以定义一个点击函数，然后onclick为元素设置属性。
function imageClick(url) {
window.location = url;
}
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" onclick="imageClick('../images/bottle.html')" />
This approach lets you get rid of the surrounding <a>element. If you want to keep it, then define the onclickattribute on <a>instead of on <img>.
这种方法可以让您摆脱周围的<a>元素。如果你想保留它，那么定义onclick属性 on<a>而不是 on <img>。
