相对定位以及父子节点之间的关系

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #myul li
        {
         float:left;
         list-style-type:none;
         }
        #myul li img
        {
         position:relative;
         top:150px;
         width:150px;
         height:150px;
         }
    </style>

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#myul li img").click(function () {
                //因为在样式表中,设置了这们的定位方式为relative所以,top=0;代表相对于它们原来的位置的
                //偏移量为0;
                $(this).css("top", "0");
                //找到这张图片的父亲的兄弟的儿子
                $(this).parent().siblings().children().css("top","150px");
            });
        })
    </script>
   
</head>
<body>
    <ul id="myul">
        <li>
            <img src="1.jpg" />
        </li>
        <li>
            <img src="2.jpg" />
        </li>
        <li>
            <img src="3.jpg" />
        </li>
        <li>
            <img src="4.jpg" />
        </li>
    </ul>
</body>
</html>

ps:重点是父子节点间的关系问题

posted @ 2012-04-21 10:42  伯箫  阅读(253)  评论(0编辑  收藏  举报