在Div上加一个超链接

DIV超链接技巧

最新推荐文章于 2022-04-25 15:56:22 发布

原创最新推荐文章于 2022-04-25 15:56:22 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#在Div上加一个超链接 #js #div #ViewUI

front 专栏收录该内容

40 篇文章

订阅专栏

在Div上加一个超链接，JavaScript VS Css？ »
Written by Rainbow On 2009-04-18 With 0 Comments
前一段时间我为一个DIV上加链接而苦恼，到底用啥样的技术那？JavaScript VS Css？

用<a></a>把DIV内容包含进去进行超链接是不明智的选择，再说也不符合WEB标准。我想

何必用<a>标记那！实际上在DIV的onclick属性上加一段JavaScript小脚步就行了，但是

你的浏览器要支持JavaScript脚步。

即使无法运行脚本，另一个解决方法是在DIV块里用<a></a>超链接呀，一样可以链接到

目的地，岂不是完美。

好了，不多说了，那就开始我们的小应用吧!

关键代码是：

location.href=’http://www.blog.moocss.com/’
    ---cursor:hand；只对ie有效   (层上加div显示个小手形状)
	建议用：style="cursor:pointer;"
	---在新窗口打开链接
	---<div onClick="javascript:window.open('#','_blank')"></div>
        ---<a href="http://www.soso.com">把那段动态代码嵌在中间</a>
Html Code :

<div id="header" style="cursor:pointer;" 

onclick="location.href='http://www.blog.moocss.com/';"> 
<a href="#"></a> 
</div>

Css Code :

#header {
width: 300px;
height: 100px;
border: 4px solid #996600;
background-color: #FFCC62;
}
#header a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
#header a:hover {
text-decoration: none;
background-color: #FFE0A2;
}

到了最后我在多说几句，这个小技术还可以应用到，用Div包含的整个文字或者用DIV作

的按钮都可以轻松做超链接。

此技术换可以在HTML的其它标记上应用，只要支持onclick事件就行了。再用CSS美化一

下。(引自：http://blog.moocss.com/tutorials/html-css-tutorials/38.html)