Make anchor tag with image clickable

问题

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

回答1:

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:

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

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.

The link

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

In the click event

location.href = this.dataset.href;

回答2:

Instead of using

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

you can use

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

In anchor tag, you can also change the href attribute if you want to redirect it to any url, like this:

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

回答3:

use this

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

source :- http://www.menucool.com/jquery-slider

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

Use image tag inside a tag to display image as hyperlink

回答5:

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

This is simple and straight forward answer

来源：https://stackoverflow.com/questions/35547528/make-anchor-tag-with-image-clickable

标签

javascript

jquery

html

css

anchor