如何在新选项卡中打开div链接Javascript onClick =“window.location

时间:2014-04-04 07:45:43

标签: javascript html css

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

假设我必须在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/

谢谢!

2 个答案:

答案 0 :(得分:27)

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

答案 1 :(得分:2)

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