li区块的整体点击css、jQuery代码

li-dianji.gif

有的时候会想让li列表,或者文章带有标题和简短简介的列表整体加上一个连接直接连接到具体文章,这样有两种方法,

一种是用纯css来制作:

<a href="">

文章标题
详细简介

</a>

像上面的结构一样把标题和简介都放到a标签里,

优点:可以达到连接的效果,hover的时候可以兼容一切主流浏览器。
缺点:就是里面不能再有第二个连接了,还有就是这样做对搜索引擎不是很友好,可能会被看做有作弊的嫌疑。

第二种方法:

用js代码来实现这个效果,今天就用jQuery的简短代码来实现给大家把,
<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>

用这段代码就可以吧li里面的a连接的href地址重定向给li,这样点击li的时候就相当于点击了a标签,但是不用担心,只是find第一个a标签的href,所以li里面还可以多放一些连接也是不会出现出错的,只要让第一个连接放做li想要的连接就好了。

转载于:https://www.cnblogs.com/52shidai/archive/2010/06/04/1751674.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值