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>

 

相关文章:

  • 2022-12-23
  • 2021-07-18
  • 2022-01-29
  • 2021-12-12
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-10-14
猜你喜欢
  • 2021-06-19
  • 2021-06-16
  • 2022-02-05
  • 2022-12-23
  • 2022-12-23
  • 2021-10-27
相关资源
相似解决方案