使用div作为链接 - 打开新标签的选项？ [英] Using a div as a link - option to open new tab?
问题描述
目前我在我的网站上使用了这个小小的js来让我的div充当按钮： < div id =itemonclick =location.href ='http：//www.google.com';风格= 光标：指针; >谷歌< / DIV>
但是当网页浏览打开大量标签页时，我经常这样做。有什么办法可以修改我的代码以允许这么做？
这应该做到这一点： -
< html>
< head>
< style>
.sampleDiv
{
position：relative;
margin：0px auto;
width：400px;
height：200px;
背景色：#CCCCCC;
text-align：center;
}
.actualLink
{
position：absolute;
top：0px;
left：0px;
宽度：100％;
身高：100％;
}
.linkText
{
position：relative;
top：80px;
}
< / style>
< / head>
< body>
< div class =sampleDiv>
< a class =linkTexthref =test.html>测试< / a>
< a class =actualLinkhref =test.html>< / a>
< / div>
< / body>
< / html>
与类actualLink的链接覆盖整个div。
与类linkText的链接提供文本。
使用两个标签的目的是，如果你只使用actualLink，那么你不能将文本放在任何你想要的位置。通过使用类linkText的链接，你可以灵活地居中（垂直）文本（水平居中可以完成只使用actualLink）
Currently I'm using this small piece of js in my site to allow my div to act as a button:
<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?
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)
这篇关于使用div作为链接 - 打开新标签的选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
