jQuery-整块可点击性效果

 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

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

        }); 

    </script>

html:

<ul class="pane-list">
        <li>
            <h3>
                <a href="http://www.webdesignerwall.com">Web Designer Wall</a></h3>
            <p>
                A wall of design ideas, web trends, and tutorials</p>
        </li>
        <li>
            <h3>
                Best Web Gallery</h3>
            <p>
                Featuring the best <a href="http://bestwebgallery.com">CSS and Flash web sites</a></p>
        </li>
        <li>
            <h3>
                N.Design Studio</h3>
            <p>
                <a href="http://www.ndesign-studio.com">Blog</a> and design portfolio of Nick La</p>
        </li>

</ul>

css:

<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>

 

作者： 望月狼

出处： http://www.cnblogs.com/wangyuelang0526

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.http://www.cnblogs.com/wangyuelang0526/archive/2012/06/04/2534699.html