如何使div链接在新标签页中打开Javascript onClick="window.location"?

14

我创建了一系列社交媒体按钮,当鼠标悬停时会切换到不同的图像(产生高亮效果)。图像按我的要求工作,但是我似乎无法弄清如何将页面加载到新的选项卡/屏幕中。我需要实现相当于 <a target="_blank"> 的功能。

假设我必须在 onClick 中更改某些内容...?

以下是代码:

<div id="insidefooter">
<ul>
    <li>
        <div id="facebook" style="cursor:pointer;" onClick="window.location='https://www.facebook.com';"></div>
    </li>
    <li>
        <div id="youtube" style="cursor:pointer;" onClick="window.location='https://www.youtube.com';"></div>
    </li>
    <li>
        <div id="twitter" style="cursor:pointer;" onClick="window.location='https://twitter.com/';"></div>
    </li>
</ul>
</div>

这是CSS:

#facebook {
height: 40px;
position: relative;
top: 0px;
left: 260px;
width: 40px;
background-image:url(/img/index/footer/facebook-button.jpg);
}

#facebook:hover {
height: 40px;
width: 40px;
background-image:url(/img/index/footer/facebook-button2.jpg);
top: 0;
left: 260px;
width: 40px;
position: relative;
}

#youtube {
height: 40px;
position: relative;
top: -62px;
left: 360px;
width: 40px;
background-image:url(/img/index/footer/youtube-button.jpg);
}

#youtube:hover {
height: 40px;
width: 40px;
background-image:url(/img/index/footer/youtube-button2.jpg);
top: -62px;
left: 360px;
width: 40px;
position: relative;

我为了简单起见省略了一些CSS代码,但这里有一个演示http://fiddle.jshell.net/3Bsyd/2/

谢谢!


window.open();?如果你不定义高度和宽度,它将在一个新的标签页中打开。 - iamsleepy
你可以在这里找到如何使用div作为链接选项以打开新标签页的重复问题:https://dev59.com/p2jWa4cB1Zd3GeqPtLXa - rk rk
@rkrk 谢谢,抱歉可能错过了问题。 - ben_dchost
2个回答

43

onclick="window.open('http://google.pl', '_blank');"

可以翻译为:点击时打开一个新窗口,跳转到 http://google.pl 网址。

我正在寻找正确的右键选项,让用户决定是在新标签页中打开链接还是在当前标签页中打开。就像按 Ctrl + 单击可以在新标签页中打开一样,单击会在当前标签页中打开页面。 - Mai

2

<div id="facebook" style="cursor:pointer;" onClick="window.open('http://www.google.com','_newtab');">测试</div>


谢谢您的回答。_newtab和_blank有什么区别? - ben_dchost
两者执行相同操作,建议使用_blank。 - Santhosh Kumar Vijayarangan
有什么区别?@ben_dchost - Santhosh Kumar Vijayarangan

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接