如何在 DIV 标签中设置 target="_blank"？答案

【问题标题】：How to set a target="_blank" in a DIV tag?如何在 DIV 标签中设置 target="_blank"？
【发布时间】：2012-03-20 20:30:06
【问题描述】：

有一个显示一些按钮（背景图片等）的页面，它们都是可点击的。我想要这个特定按钮做的是使用 *target="_blank"* 在另一个浏览器选项卡中打开目标页面。它被设置为 div 中的 href 我不能这样做。关于解决此问题的任何想法？

<div class="dashboard_navbutton" href="Home/RequestRedirect" style="background-image: url('@Url.Content("~/Content/images/Form_button.png")');">
    <p>Insert witty text here</p>
</div>

【问题讨论】：

哪个版本的 HTML？是的，这很重要。
HTML4（确切地说是 XHTML 1.0 过渡版）
div 上的 href 属性在 HTML4 或 XHTML1 下无效。我似乎记得它在 XHTML2 中是允许的，但 XHTML2 从未发生过。所以 HTML5 是您可以在这里使用的唯一 DOCTYPE。除非您切换标签的顺序（将a 元素放在p 中）。

标签： javascript html model-view-controller

【解决方案1】：

只需将div 设为a 并将display:block; 添加到style。

编辑：确保您选择的DOCTYPE 支持在a 元素内使用p。更一般地，它应该使用display 的计算样式而不是标签名称来确定一个元素是inline 还是block，就其中一个元素而言。我相信 HTML5 很好：<!DOCTYPE html>.

【讨论】：

同意。有一个div 和一个href 是一个可怕的黑客攻击
是的，href 属性不应位于 div 上。如果您尝试通过按钮打开一个新窗口，那么使用window.open 的一些javascript 标记是您最好的选择button。
嗯，并不是所有的 HTML 方言都像 <a> 中的 <p>，因此您应该建议将 <a> 放入 <p> 中，或者确保 DOCTYPE 设置正确。跨度>
确实如此。我相信 HTML5 Doctype 允许吗？（它当然似乎允许表格和hrs 以及其中可能不应该存在的其他一些东西：p）
我会尝试 a 和 display:block 样式。顺便说一句，我没有设计原始页面。只是试图修改那里的现有链接。不知道你可以在 div 标签中放一个 href。

【解决方案2】：

为 div 捕获 onclick 事件，调用一个 javascript 函数，让该函数打开窗口。

html sn-p
onclick="opennewwin()"

function opennewwin(){
    var awindow = window.open(loc, "blank", "height=500px,width=500px");

}

【讨论】：

这种事情肯定会起作用，但从语义上讲，在标记中使用<button> 而不是<div> 更有意义；实际上最好的选择是一个无序列表<ul>，在每个<li> 项目中使用<a> 包裹新的HTML5 <nav>。您可以使用 javascript 和/或 CSS 伪类进行类似按钮的演示。
除非您将其发布在 Intranet 上，否则我不会使用 HTML5。太多的旧浏览器无法处理它。但是您可以在较旧的标准中使用您的解决方案，并且效果很好。

【解决方案3】：

我试图动态添加也可用作链接的 div。这是我使用 CSS 的解决方案。

首先容器需要相对定位。

.container {position: relative;}

接下来，链接需要填充容器。

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

就像我说的，我动态组装了 div，但 html 看起来像这样：

<div class='container'>[some other content]<a href="link"></a></div>

容器必须是相对位置的，否则位置绝对链接会填充其第一个位置相对祖先（可能是整个视口）。当然，您可以为 div 或链接添加样式。请注意，我使用的是 position: sticky nav-bar，我必须将它的 z-index 设置为高以避免与 div 按钮发生冲突。

优点：您为链接设置的任何样式和定位都将适用。良好的“风格”：不会将块元素放在内联中（应该避免浏览器问题，尽管我还没有彻底测试过）。不需要任何其他语言或框架。

缺点：不像 Niet 的答案那么简单，但不应该依赖于 Doctype。

【讨论】：