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>
原文地址:https://www.cnblogs.com/wangyuelang0526/p/2534699.html