使用图片可点击的锚定代码 [英] Make anchor tag with image clickable

问题描述

我使用的是一个插件，一个是 http：//www.menucool。 com / slider / thumbnail-slider-demo-2 。

I am using one plugin that one is http://www.menucool.com/slider/thumbnail-slider-demo-2. But i want to implement clickable image.

在这个插件中，通过锚标签显示图片，如下所示：

In this plugin show image by anchor tag like this:

<div style="padding:120px 0;">
        <div id="thumbnail-slider">
            <div class="inner">
                <ul>
                    <li>
                        <a class="thumb" href="img/6.jpg"></a>
                    </li>
                    <li>
                        <a class="thumb" href="img/7.jpg"></a>
                    </li>
               </ul>
          </div>
       </div>
  </div>  

点击此图片后，我想重定向页面。给我一些想法。这是可能使锚点标签与图像可点击这个插件？
给我一些想法。
感谢

I want to redirect page after click on this image. Give me some idea about this. It is possible to Make anchor tag with image clickable with this plugin? Give me some idea.
Thanks

推荐答案

如果我正确理解你，你只需要听 / code>事件，然后做任何你想要的。

If I understand you correctly, you just need to listen to the click event, then do whatever you want.

在下面的演示中，如果你点击前面的幻灯片，它会重定向到谷歌。如果没有，它什么都不做。如果您想在任何图片上点击时重定向，只需删除如果语句检查前面的图像：

In the below demo, if you click on the front slide it will redirect to google. If not, it will do nothing. If you want to redirect when click on any image, just remove the if statement that check that the image in the front:

注意：由于安全原因，它不会执行重定向，因此您可以在此 bin 。

Note: It will not do the redirect because of security reason so you can see it in this bin.

[].forEach.call(document.querySelectorAll('.thumb'), function(a) {
  a.addEventListener('click', function(event) {
    // Check if the image in the front
    if (this.parentNode.classList.contains('active')) {
      location.href = this.dataset.href;
    }
  });
});

<link href="http://www.menucool.com/slider/thumb/2/thumbnail-slider.css" rel="stylesheet" />
<script src="http://www.menucool.com/slider/thumb/2/thumbnail-slider.js"></script>
<div id="thumbnail-slider">
  <div class="inner">
    <ul>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/6.jpg" data-href="http://google.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/7.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/2.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/3.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/4.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/5.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/8.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/9.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/10.jpg" data-href="http://facebook.com"></a>
      </li>
      <li>
        <a class="thumb" href="http://www.menucool.com/slider/thumb/img/11.jpg" data-href="http://facebook.com"></a>
      </li>
    </ul>
  </div>
</div>

http://jsbin.com/vikejo/2/edit?html,js,output

编辑
要为每个图像重定向到其他网址，您可以添加 属性，在这种情况下 data-href ，那么，当用户点击图片时，他会重定向到属性值的URL。

Edit To redirect to a different URL for each image, you can add a data- attribute, in this case data-href, then, when user clicks on the image he redirect to the URL which is the value of the attribute.

链接

<a class="thumb" href="http://www.menucool.com/slider/thumb/img/6.jpg" data-href="http://google.com"></a>

点击事件

location.href = this.dataset.href;

这篇关于使用图片可点击的锚定代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！