如何在 DIV 标签中设置目标 =“_blank”？
[英]How to set a target="_blank" in a DIV tag?
问题描述
Got a page that displays some buttons (background images, etc) and they are all clickable.
有一个页面显示一些按钮（背景图像等），它们都是可点击的。 What I want this specific button to do is open the target page in another browser tab using *target="_blank"*.我希望这个特定按钮做的是使用 *target="_blank"* 在另一个浏览器选项卡中打开目标页面。 The way it is setup as the href in a div I cannot do this.将它设置为div 中的 href 的方式我不能这样做。 Any ideas on a work around for this?关于解决这个问题的任何想法？
<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>
3 个解决方案
解决方案1
8 2012-03-20 20:31:29
Just make that div an a and add display:block;只需将该div a并添加display:block; to the style .到style 。
EDIT: Ensure that your chosen DOCTYPE supports the use of p inside an a element.编辑：确保您选择的DOCTYPE支持在a元素内使用p 。 More generally, it should use the computed style for display rather than the tag name to determine if an element is inline or block in terms of having one in the other.更一般地，它应该使用计算样式进行display而不是标签名称来确定一个元素是inline元素还是block元素。 I believe the HTML5 one is fine: <!DOCTYPE html> .我相信 HTML5 很好： <!DOCTYPE html> 。
解决方案2
1 2012-03-20 20:39:56
trap the onclick event for the div, call a javascript function, have the function openthe window.捕获 div 的 onclick 事件，调用 javascript 函数，让函数打开窗口。
html snippet html 片段
onclick="opennewwin()" onclick="opennewwin()"
function opennewwin(){
var awindow = window.open(loc, "blank", "height=500px,width=500px");
}
解决方案3
0 2021-04-07 20:43:39
I was trying to dynamically add divs that would also function as links.我试图动态添加也可以用作链接的 div。 This was my solution using CSS.这是我使用 CSS 的解决方案。
First the container needs relative positioning.首先容器需要相对定位。
.container {position: relative;}
Next, the link needs to fill the container.接下来，链接需要填充容器。
.container a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
Like I said, I dynamically assembled the div, but the html would look something like this:就像我说的，我动态组装了 div，但 html 看起来像这样：
<div class='container'>[some other content]<a href="link"></a></div>
The container must be position relative, otherwise the position absolute link fills its first position relative ancestor (probably the whole viewport).容器必须是相对位置，否则位置绝对链接会填充其第一个位置相对祖先（可能是整个视口）。 Of course, you can add styling to the div or the link.当然，您可以为 div 或链接添加样式。 Note, I was using a position: sticky nav-bar, and I had to set it's z-index high in order to avoid collisions with the div buttons.请注意，我使用了一个位置：粘性导航栏，我必须将它的 z-index 设置为高，以避免与 div 按钮发生冲突。
Pros: whatever styling and targeting you set for your links will apply.优点：您为链接设置的任何样式和目标都将适用。 Good 'style': doesn't put a block element inside an inline (should avoid browser issues, though I haven't thoroughly tested it).良好的“样式”：不会将块元素放在内联中（应该避免浏览器问题，尽管我还没有对其进行彻底测试）。 Does not require any other languages or frameworks.不需要任何其他语言或框架。
Cons: Not as simple as Niet's answer, but shouldn't be Doctype dependent.缺点：不像 Niet 的回答那么简单，但不应该依赖于 Doctype。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.