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

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

使用这个

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

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

Answer 2

而不是使用

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

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

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

这是简单直接的答案

Answer 5

如果我没理解错的话，你只需要监听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 这是属性的值。

link

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

点击事件中

location.href = this.dataset.href;

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

Make anchor tag with image clickable

html

javascript

css

anchor

jquery