[英]How To Add An “a href” Link To A “div”?
我需要知道如何在div中添加一个href链接? 你把一个href标签放在整个“buttonOne”div上吗? 或者它应该在“linkedinB”div周围或内部?
这是我的HTML:
<div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
你不能用一个标签包围它吗?
<a href="#"><div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div></a>
在这种情况下,它并不重要,因为两个div
之间没有内容。
任何一个都会让浏览器向下滚动到它。
a
元素看起来像:
<a href="mypageName.html#buttonOne">buttonOne</a>
要么:
<a href="mypageName.html#linkedinB">linkedinB</a>
尝试用javascript实现这个:
<div id="mydiv" onclick="myhref('http://web.com');" >some stuff </div>
<script type="text/javascript">
function myhref(web){
window.location.href = web;}
</script>
尝试创建一个名为overlay
的类,并将以下css应用于它:
a.overlay { width: 100%; height:100%; position: absolute; }
确保将其放置在定位元素中。
现在只需将一个<a>
标签与该类放在您想要链接的div中:
<div id="buttonOne">
<a class="overlay" href="......."></a>
<div id="linkedinB">
<img src="img/linkedinB.png" alt="never forget the alt tag" width="40" height="40"/>
</div>
</div>
PhilipK的建议可能有效,但它不会验证,因为你不能在一个内联元素( a
)中放置一个块元素( div
)。 当你的网站没有验证W3C Ninja将会为你而来!
另一个建议是尝试避免内联样式。
我会说:
<a href="#"id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
但是,它仍然是一个链接。 如果您想将链接更改为按钮,则应将#buttonone重命名为#buttonone a {your css here}。
您的解决方案似乎不适合我,我有以下代码。 如何将链接放入最后两个div。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<style>
/* Import */
@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);
* {
font-family: "Quicksand", sans-serif;
font-weight: bold;
text-align: center;
text-transform: uppercase;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.025s ease;
}
/* Colors */
#ora {
background-color: #e67e22;
}
#red {
background-color: #e74c3c;
}
#orab {
background-color: white;
border: 5px solid #e67e22;
}
#redb {
background-color: white;
border: 5px solid #e74c3c;
}
/* End of Colors */
.B {
width: 240px;
height: 55px;
margin: auto;
line-height: 45px;
display: inline-block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#orab:hover {
background-color: #e67e22;
}
#redb:hover {
background-color: #e74c3c;
}
#whib:hover {
background-color: #ecf0f1;
}
/* End of Border
.invert:hover {
-webkit-filter: invert(1);
-moz-filter: invert(1);
-ms-filter: invert(1);
-o-filter: invert(1);
}
</style>
<h1>Flat and Modern Buttons</h1>
<h2>Border Stylin'</h2>
<div class="B bo" id="orab">See the movies list</div></a>
<div class="B bo" id="redb">Avail a free rental day</div>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.