锚标签无法使div可点击

Question

我试图使整个div可点击，我做了以下工作

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

但他的div无法点击，有人可以告诉我我的代码有什么问题吗？

Answer 1

您可以使用javascript，在下面的代码中，我创建了一个添加click事件处理程序的函数，而不是使用不能放在彼此之间a标签。

还包括一个有关如何设置div样式的示例（请参见clickable css类）。

 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

首先，你不能有一个div里面a 。 我的意思是，从技术上讲，它在某些环境中有效，但是它违反规范，因此您不能依赖该结构。 如果您想使用div广泛链接，最好将a绝对定位并拉伸以适合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>