使带有图像的锚点标签可点击

Question

我使用的一个插件是http://www.menucool.com/slider/thumbnail-slider-demo-2 。 但我想实现可点击的图像。

在此插件中，通过锚标记显示图像，如下所示：

<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>  

单击此图像后，我想重定向页面。 给我一些想法。 可以通过此插件使带有图像的锚点标签可点击吗？ 给我一些想法。
谢谢

Answer 1

而不是使用

<a class="thumb" href="img/6.jpg"></a>

您可以使用

<a class="thumb" href="img/6.jpg"><img src="img/6.jpg" alt="" /></a>

在锚标记中，如果要将其重定向到任何URL，也可以更改href属性，如下所示：

 <a class="thumb" href="http://www.google.com"><img src="img/6.jpg" alt="" /></a>

Answer 2

如果我对您的理解正确，则只需要听click事件，然后做任何您想做的事情即可。

在下面的演示中，如果您单击前幻灯片，它将重定向到google。 如果没有，它将什么都不做。 如果要在click任何图像时进行重定向，只需删除if语句，以检查图像是否位于前面：

注意：由于安全原因，它不会进行重定向，因此您可以在此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

编辑要重定向到每个图像的不同URL，可以添加一个data-属性，在本例中为data-href ，然后，当用户单击该图像时，他将重定向到该URL，该URL是该属性的值。

链接

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

在点击事件中

location.href = this.dataset.href;

Answer 3

用这个

<li><a href="/"><img class="thumb" src="1.jpg" style="height:auto;" /></a></li>

来源： -http : //www.menucool.com/jquery-slider

Answer 4

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

在标签内使用图片标签将图片显示为超链接

Answer 5

<a class="thumb" href="#target_url"><img src="img/6.jpg"></a>

这是简单明了的答案