晨露博客

关注互联网，关注科技，关注生活！

上一篇： 快乐周末-晨露漫画集（十七） 下一篇：中秋，月之歌

jQuery实现整块可点击效果

jquery相信大家在上网的时候一般点击的连接都是连接到文字上面的，有时候，需要使整块区域都有连接效果，也就是点击一块区域的任何地方，都可以实现网页链接，那么，今天就介绍利用jQuery实现整块可点击效果的原理。

程序的主要原理是如果你想让class="pane-list"的<ul>内的 <li> 可点击(整块)，你可以向 ".pane-list li"指派一个函数，使它被点击时，函数找到 <a>元素，重定向到它的href属性值。

$(document).ready(function(){

$(".pane-list li").click(function(){ window.location=$(this).find("a").attr("href"); return false; });

});

具体效果如下图：

您可以查看演示，或者下载源码。

 

小博文章如没有特殊说明均为原创，如要帮忙推广还望加上我的链接哦！
  • 本文Url: http://www.chenlublog.com/post/jQuery-block-clickable.html (出自: 晨露博客)
    • Tags: jquery  
    发布:morningdew | 分类:网站建设 | 评论:7 | 引用:0 | 浏览:

    点击这里获取该日志的TrackBack引用地址

    • Gravatar Icon
      回复
    • quote 2.Firm2011-9-10 15:24:55
    • 呵呵，第四个模块，我看很可爱，就点了下，哈哈。GG插得好啊
    • Gravatar Icon
      回复
    • quote 3.朵未2011-9-10 15:27:00
    • 效果挺好的。收藏，备用。晨露中秋快乐！
    • Gravatar Icon
      回复
    • quote 5.BB霜2011-9-11 13:05:22
    • 只是有点专业奥。。支持

    发表评论:

    ◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

    关于本文

    您正在阅读的是：jQuery实现整块可点击效果
    morningdew 发表于：2011-9-10 12:21:15
    分类：网站建设
    关键词：jquery  

    博客作者

    Morningdew

    晨露博客

    热门文章

    最近更新

    最新评论及回复

    最近留言

    站类搜索

    博文分类

    博文归档

    Copyright ©2010 晨露博客. All Rights Reserved.网站地图  Theme Designed By TangChang
    本博客采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.
    This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.
    CONTACT ME:E-mail:tcmorningdew@gmail.com QQ:515667845<风荷雨莲>   津备ICP09004821   GO TO TOP

    Powered By Z-Blog 1.8 Walle Build 91204