使用JavaScript链接<div>是否可行？

Question

我想要链接整个 <div>，但是CSS2不支持给div（或span）添加href。我的解决方案是使用onClick属性添加链接。这在现代浏览器中是否可行？

示例代码：

<div class="frommage_box" id="about_frommage" onclick="location.href='#';">
            <div class="frommage_textbox" id="ft_1"><p>who is Hawk Design?</p></div>

我的测试页面位于http://www.designbyhawk.com/pixel。每天更新。

感谢您的帮助。

- jhchawk

---

{{link1：<div> </ div>}} - JCOC611

a元素是内联元素，因此不能包含像div这样的块级元素。浏览器会尝试为您“修复”此问题，但无法保证它们将执行何种操作。 - lonesomeday

已经被问答过很多次了...请参考：使用Div代替锚点 或者 如何将div标签转换为链接 或者 将Div转换为链接 甚至是 将div转换为链接...（简短的回答：你不需要这样做。你可以将链接转换为div...） - Shog9

Answer 1

您不需要这样做。有一个非常简单和符合标准的方法可以实现此目的。

块级元素默认会占用整个可用宽度。a元素默认不是块级元素，但您可以使用CSS中的display:block将其变成块级元素。

请参见此示例（无需Javascript！）。 您可以在div中的任何位置单击以访问链接，即使链接文本并未占用整个宽度。 您只需要删除该p元素并将其更改为a即可。

- lonesomeday

---

我可能错了，但是无论如何，在<a>标签内部包含块元素的页面永远不会通过验证。（编辑 我没有错，但是这个答案也不建议这样做 :-)） - Pointy

@Pointy：这个例子展示了div内的a，但是样式设为块状元素（用于全宽）。您还可以将span嵌套在a内，并将它们都设置为块级元素。 - Shog9

@Pointy 我的a标签内没有块元素...(尽管我在那里有一个不匹配的</p>--已删除。) - lonesomeday

另一个问题是div高度为248像素。如果您查看我的测试网站（请参见帖子），您会发现文本包含在一个div中的另一个div中。因此，虽然这将使较大的div的水平切片可点击，但我需要整个div都可以点击。 - jhchawk

@jhchawk 然后在 a 上面使用 height: 100%。jsfiddle。 - lonesomeday

Answer 2

将点击事件处理程序附加到 <div> 元素将适用于启用 JavaScript 的用户。

但是，如果您正在寻找渐进增强解决方案，则应坚持使用 <a> 元素。

- Ken Browning

Answer 3

这是可以接受的，只是不利于搜索引擎优化。

也许你可以使一个<a>元素像一个

元素一样？（将其样式设置为display:block等）

- Mārtiņš Briedis

---

在他的例子中，他将一个 div 放在了他要附加点击处理程序的 div 内部。我认为即使 A 元素具有 display: block 属性，将 DIV 放在 A 元素内部也不是一个好主意。W3C 验证器会接受吗？ - CodeTwice

是的，这是一个有效的观点 - 你不能把块级元素放在内联元素（a）中，但我只是建议 - 如果设计允许，为什么不呢？没有设计截图或至少一些CSS很难说。也许那个内部的 div 和 p 可以很容易地被 span 替换。 - Mārtiņš Briedis

Answer 4

HTML：

<div class='frommage_box'>
    <a href='location.html'>CONTENT GOES HERE</a>
</div>

CSS：

.frommage_box a{
    display:block;
    height:100%;
}

默认情况下，块级元素占据100％的宽度。我们将高度调整为100％。这将允许蜘蛛爬行您的页面。

- Chris Sobolewski

---

你说得对。正在编辑中。不知道我当时在想什么，哈哈。 - Chris Sobolewski

Answer 5

如果你只是想要一个大的可点击的框，尝试在锚点上设置以下CSS样式：

a {
   display: block;
   padding: 10px;
   width: 200px;
   height: 50px;
}

- sankargorthi

---

这将使所有锚点标签成为块级元素。显然你不想这样做。 - Chris Sobolewski

当然可以。我显然是指设计师根据他们的页面设计添加特定的样式。 - sankargorthi

Answer 6

它将在每个浏览器中运行（甚至IE6）。唯一的问题是由于它是JavaScript，搜索引擎可能无法获取它。我没有看到其他使整个div可点击的方法。在所有浏览器中放置“a”标签不起作用。

- teuneboon

---

由于谷歌现在可以索引Flash文件中的文本，谁知道他们还能做什么，包括嗅探未执行的代码。 :P - Shaz

Google现在基本上可以索引大部分的JavaScript和Ajax（如果有足够的理由，即高信任因素）。然而，如果您关心SEO，请尽可能地让Google找到您的内容。 - Chris