使用 div 作为链接 - 打开新标签的选项？答案

【问题标题】：Using a div as a link - option to open new tab?使用 div 作为链接 - 打开新标签的选项？
【发布时间】：2012-09-13 20:02:57
【问题描述】：

目前我在我的网站中使用这个小块 js 来让我的 div 充当按钮：

<div id="item" onclick="location.href='http://www.google.com';" style="cursor:pointer;">Google</div>

但是当网页浏览打开大量标签时，我经常做的事情。有什么办法可以修改我的代码以允许这样做吗？

【问题讨论】：

请访问stackoverflow.com/questions/4907843/…

标签： javascript redirect html

【解决方案1】：

我的解决方案是用锚块替换 div 块。锚块现在可以采用几乎任何 div 可以做的 CSS 样式，但它还可以包含 href，浏览器将识别并为您提供您想要查看的右键单击选项。

这么老了：

<div class="divClass" onClick="location.href='http://www.google.com'">asdf</div>

变成

<a class="divClass" href="http://www.google.com">asdf</a>

【讨论】：

【解决方案2】：

使用 target="_blank"

看这里

文档：HTML <a> target Attribute
演示：Try It

【讨论】：

我在想右键单击时弹出的对话框。我希望它存在。
你能给我们举个活生生的例子吗？发生这种情况的任何网站的链接。
我真的没有。只是我想在我右键我的div的时候使用右键链接对话框。
您的超链接无效。错误：The file you asked for does not exist.

【解决方案3】：

应该这样做：-

    <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>

actualLink 类的链接覆盖了整个 div。类 linkText 的链接提供文本。使用两个标签的目的是，如果您只使用actualLink，那么您无法将文本放置在您想要的任何位置。通过使用带有类linkText的链接，您可以灵活地（垂直）居中文本（水平居中可以仅使用actualLink完成）

【讨论】：

谢谢这帮了我很多忙！

【解决方案4】：

你可以这样做：

onclick="window.open('http://www.google.com', somename);" ...

你的意思是，类似于：

..onmousedown="op(your_url,event);"..

function op(url,event) {
  if (event.button == 2) {
    window.open(url);
  }
}

【讨论】：

我一直在寻找右键单击 -> 在新标签中打开而不是一直可用的新标签。
那么当我右键单击时会打开一个新标签吗？这就是我想要的，是的。您知道当您右键单击链接时它如何显示如何打开该链接的选项吗？如果可能的话，这就是我希望 div 做的事情。

【解决方案5】：

您不能直接执行此操作，因为这是用户在浏览器上设置的窗口，是作为新窗口打开还是作为选项卡打开。

有target="_newtab"，但没有得到广泛支持。

所以在onclick中：

window.open('page.html','_newtab');

但尝试覆盖用户的浏览器偏好并不是 IMO 的好主意。

要在右键单击时执行此操作，例如：

$('#item').mousedown(function(event) {
  if(event.which == 3) { // right click
      window.open('page.html','_newtab');
  }
})

【讨论】：

我希望右键单击对话框作为一个选项，而不是一直是新标签。

【解决方案6】：

实际上没有跨浏览器的方式来做到这一点。 Forms 或 window.open 将打开一个新窗口，而不是新选项卡。并且不要尝试在内存中创建链接并使用 javascript 单击它，因为作为安全功能，chrome 不会打开新选项卡。

【讨论】：