整个 div 是否可以作为一个链接？

Question

我希望使用整个 div 作为链接，但不使用 "onclick"，有什么简单的方法可以实现吗？

是否可以使用简单的 href 实现？

谢谢。

- Latox

Answer 1

不可以把 href 属性赋给 div 元素，也不会使它们像链接一样工作。在 HTML5 中可以使用以下方法：

<a href="#"><div></div></a>

然而，并非所有的现代浏览器（尤其是 Firefox 3.6）都支持这种方法。另一种替代方法是在 div 中添加一个绝对定位的 a 元素，使其宽度和高度均为100%：

div a {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

这是有效的HTML4，但它在较旧版本的IE上无法正常工作。否则应该能够实现你想要的效果。参见：http://www.jsfiddle.net/uRh7j/

- Yi Jiang

Answer 2

你不能这样做。但是你可以使用一个带有 style="display:block" 的 <a> 元素，它应该与一个 <div> 元素的行为完全相同，来替换你的 <div> 元素。

- oezi

---

谢谢，这比最好的答案好多了 :) - munich

Answer 3

简单的回答是不可以，但你可以使用带有CSS cursor:pointer属性的onclick来获得相同的功能。

- Will

Answer 4

在它周围包装一个锚点。

<a href="#"><div></div></a>

- daniel

---

根据我之前的评论，那是非法的HTML，并不保证在浏览器中工作（实际上，在至少基于webkit的浏览器和gecko浏览器中它是无效的）。 - OmnipotentEntity

@Daniel：单词“solution”意味着“它能用”。但这个不行。 - Cody Gray

@OmnipotentEntity 这很奇怪，因为我刚刚在Firefox 4和Chrome 9中尝试了这个标记，它完全正常工作。 - daniel

@Kyle 这是对Omni声称在Gecko和Webkit浏览器中不起作用的回应。无论如何，我在Firefox 4、Chrome 9、IE 8、Opera 11和Safari 5中尝试了这个标记，并且它在所有浏览器中都按预期呈现。由此产生的任何错误可能都可以通过一些CSS / Javascript来解决。针对我的初始评论澄清，我意识到它不是有效的，但我的理由是“如果它对您和您的受众有用，那么谁在乎呢？”网络上有很多网站不能正确验证，但功能完全正常。 - daniel

关于这是非法的评论已经过时了；在HTML5中，将<a>标签包装在<div>或其他块级元素周围现在得到支持并且是合法的。 - Paul Legato

Answer 5

根据HTML规范（HTML 4.01，Draft 5和XHTML 1.1.1），锚点标签不能包含

标签。

- OmnipotentEntity

---

自从这个答案发布以来，HTML5已经推出。在HTML5中，<a>标签可以嵌套在<div>标签内。 - Paul Legato

Answer 6

为什么不使用像jQuery这样的JavaScript框架，让div没有onclick事件，而是在jQuery中声明一个事件，如下所示：

   <script>
         $(function(){ 
           $(".click").click(function{ alert('clicked!'); });
        });        
   </script>

   <div class="click"></div>

这只是我的个人意见。谢谢。

- Nazrul Muhaimin

Answer 7

您可以通过创建一个小的透明PNG（例如10px * 10px），并使用CSS将PNG的宽度和高度设置为100％来实现此目的。然后，您可以使用a href标签包装img标签。

以下是HTML代码：

<div id="YourHeader">
    <a href="http://example.com"><img src="/path/to/header10x10.png" /></a>
</div>

这是 CSS 代码：

#YourHeader img {
    width: 100%;
    height: 100%; 
}

如果#YourHeader是一个空的div，其唯一目的是通过其background-image属性显示标题图像，则这尤其方便。

- jamesnotjim

Answer 8

我认为没有使用onclick事件是不可能的。您可以使用"display:block;"将链接显示为div，但除此之外什么也做不了。

- thedev