超级链接A化整个block的可点击化代码

发布时间：2018-08-24 13:19 所属栏目：121 来源：站长网

导读：这是 jQuery 最基本的功能之一，可以使整个Block的模块可点击化，一般用于首页或频道的列表，这样的Block中一般包括标题和部分文字介绍，不算什么特别的效果，在上边的文章中，烈火网小编说到过，如果您在网页Head中已经载入了jQuery.js的话，就可以直接使

　　这是jQuery最基本的功能之一，可以使整个Block的模块可点击化，一般用于首页或频道的列表，这样的Block中一般包括标题和部分文字介绍，不算什么特别的效果，在上边的文章中，烈火网小编说到过，如果您在网页Head中已经载入了jQuery.js的话，就可以直接使用本效果了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>Block clickable</title> <script type="text/javascript" src="http://www.veryhuo.com/uploads/Common/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".pane-list li").click(function(){ window.location=$(this).find("a").attr("href");return false; }); }); //close doc ready </script> <style type="text/css"> body { margin: 10px auto; width: 470px; } a { color: #333300; text-decoration: none; } a:visited { color: #333300; } a:hover { color: #333300; text-decoration: underline; } h3 { margin: 0; padding: 0 0 .3em; } p { margin: 0; padding: 0 0 .5em; } .pane-list { margin: 0; padding: 0; list-style: none; } .pane-list li { background: #ecfad7; padding: 10px 20px 10px; border-top: solid 1px #c4df9b; cursor: pointer; } .pane-list li:hover { background: #f6ffe9; } </style> </head> <body> <ul class="pane-list"> <li> <h3><a href="http://www.veryhuo.com">烈火学院</a></h3> <p>为网页设计、WEB开发与网站运营提供动力！</p> </li> <li> <h3><a href="http://tool.liehuo.net">站长工具</a></h3> <p>网站管理员推荐使用的WEB优化与多功能查询！</a></p> </li> <li> <h3><a href="http://bbs.liehuo.net/">交流论坛</a></h3> <p>烈火论坛提供计算机、互联网、网站技术交流！</p> </li> </ul> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）

超级链接A化 整个block的可点击化代码

超级链接A化整个block的可点击化代码