锚标签无法使div可点击

Question

i am trying to make a whole div clickable, i did the following

  <a href=""><div class="col-lg-3 col-md-6 col-sm-6 col-12 item-mb"> <div class="service-box1 bg-body text-center"> <img src="img/service/service1.png" alt="service" class="img-fluid"> <h3 class="title-medium-dark mb-none"><a href="category-list-layout1.html">Electronics</a></h3> <div class="view">(19,805)</div> </div> </div></a> 

but he div is not becoming clickable, can anyone please tell me whats wrong in my code?

Answer 1

You can use javascript, in the code below I created a function that adds click event handlers instead of using a tags which can't be put inside each other.

Also included an example of how to style the div (see clickable css class).

 function addLink(divId, url){ let div = document.getElementById(divId); div.setAttribute('data-link-url', url); link1.addEventListener('click', function(e){ window.location = this.getAttribute('data-link-url'); }); } addLink('link1', 'https://stackoverflow.com'); 

 .clickable{ cursor: pointer; } 

 <div id="link1" class="clickable"> <div class="service-box1 bg-body text-center"> <img src="img/service/service1.png" alt="service" class="img-fluid"> <h3 class="title-medium-dark mb-none">text</h3> <div class="view">(19,805)</div> </div> </div> 

Answer 2

First of all, you can't have a div inside a . I mean, technically in some environments it works, but its against specification, so you can't rely on that structure. If you want to have a div wide link you better have your a absolutely positioned and stretched to fit your div

Answer 3

Try

 <div class="col-lg-3 col-md-6 col-sm-6 col-12 item-mb" onClick="javascript:window.location='//stackoverflow.com'"> <div class="service-box1 bg-body text-center"> <img src="img/service/service1.png" alt="service" class="img-fluid"> <h3 class="title-medium-dark mb-none"><a href="category-list-layout1.html">Electronics</a></h3> <div class="view">(19,805)</div> </div> </div>