javascript 使用 div 作为链接 - 打开新标签的选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12529837/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using a div as a link - option to open new tab?
提问by Flaxbeard
Currently I'm using this small piece of js in my site to allow my div to act as a button:
目前我在我的网站中使用这小块 js 来让我的 div 充当按钮：
<div id="item" onclick="location.href='http://www.google.com';" style="cursor:pointer;">Google</div>
But something I do very often when web browsing is opening a large amount of tabs. Is there any way I could modify my code to allow for this?
但是当网页浏览打开大量标签时，我经常做的事情。有什么办法可以修改我的代码以允许这样做吗？
回答by NikolaiDante
You can't directly do this, as it's a user setting on their browser whether windows open as new windows or as tabs.
您不能直接执行此操作，因为这是用户在浏览器上设置的窗口是作为新窗口打开还是作为选项卡打开。
There is target="_newtab"but that isn't widely supported.
有，target="_newtab"但没有得到广泛支持。
So in the onclick:
所以在点击：
window.open('page.html','_newtab');
But attempting to override a users browser preference isn't a good idea IMO.
但是尝试覆盖用户浏览器首选项并不是一个好主意 IMO。
To do it on a right click something like:
要在右键单击类似的内容上执行此操作：
$('#item').mousedown(function(event) {
if(event.which == 3) { // right click
window.open('page.html','_newtab');
}
})
回答by Soumya Mukherji
This should do it:-
这应该这样做：-
<html>
<head>
<style>
.sampleDiv
{
position:relative;
margin:0px auto;
width:400px;
height:200px;
background-color:#CCCCCC;
text-align:center;
}
.actualLink
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}
.linkText
{
position:relative;
top:80px;
}
</style>
</head>
<body>
<div class="sampleDiv">
<a class="linkText" href="test.html">testing</a>
<a class="actualLink" href="test.html"></a>
</div>
</body>
</html>
The link with class actualLink is covering whole of the div. The link with class linkText is providing the text. The purpose of using two tag is that if you only use actualLink then you cannot position the text wherever you want.By using the link with class linkText you have flexibility of centering(vertically) the text(horizontal centering can be done using only actualLink)
类 actualLink 的链接覆盖了整个 div。类 linkText 的链接提供了文本。使用两个标签的目的是，如果您只使用 actualLink，那么您无法将文本定位在您想要的任何位置。通过使用带有类 linkText 的链接，您可以灵活地（垂直）居中文本（水平居中可以仅使用 actualLink 完成）
回答by Junior
My solution was to replace the div blocks with anchor blocks. Anchor blocks can now take on the CSS styles of nearly anything a div can do, but it can also include href, which the browser will recognize and give you the right-click options you want to see.
我的解决方案是用锚块替换 div 块。锚块现在几乎可以采用 div 可以做的任何 CSS 样式，但它还可以包含 href，浏览器会识别它并为您提供想要查看的右键单击选项。
So old:
这么老：
<div class="divClass" onClick="location.href='http://www.google.com'">asdf</div>
becomes
变成
<a class="divClass" href="http://www.google.com">asdf</a>
回答by Sudhir Bastakoti
you could do:
你可以这样做：
onclick="window.open('http://www.google.com', somename);" ...
do you mean, something like:
你的意思是，像这样：
..onmousedown="op(your_url,event);"..
function op(url,event) {
if (event.button == 2) {
window.open(url);
}
}
回答by CRDave
use target="_blank"
使用目标=“_blank”
Have a look here
看看这里
Document : HTML <a>target Attribute
Demo : Try It
文档：HTML<a>目标属性
演示：试一试
回答by áxel Costas Pena
There is actually no cross-browser way to do this. Forms or window.open will open a new window, not a new tab. And don't try to create a link in memory and click it with javascript because chrome won't open the new tab, as a security feature.
实际上没有跨浏览器的方式来做到这一点。Forms 或 window.open 将打开一个新窗口，而不是一个新选项卡。并且不要尝试在内存中创建链接并使用 javascript 单击它，因为作为安全功能，chrome 不会打开新选项卡。
