使帶有圖像的錨點標簽可點擊

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>

這是簡單明了的答案