CSS 图片替换

1CSS:

<style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
           
        }

        #u1 {
            position: relative;
            float: left;
            width: 96px;
            height: 201px;
            border-left: 1px solid #62809D;
            border-bottom: 1px solid #62809D;
        }

            #u1 li {
                height: 49px;
                text-align: center;
                line-height: 50px;
                background-color: #f5f7fa;   
                border-top: 1px solid #62809D;   
                border-right:1px solid #62809D;       
            }

        #u2 {
            position: relative;
            float: left;
            width: 300px;
             height: 200px;
            border-right: 1px solid #62809D;
            border-top: 1px solid #62809D;
            border-bottom: 1px solid #62809D;
        }

            #u2 li {
                display: none;
                height: 200px;
            }

        .one {
            background-repeat: no-repeat;
            background-size: 16px 16px;
            background-position: 4px 50%;
        }

            .one.sea {
                background-image: url(images/sea.png);
            }

            .one.air {
                background-image: url(images/air.png);
            }

            .one.express {
                background-image: url(images/express.png);
            }

            .one.eche {
                background-image: url(images/eche.png);
            }

        #u1 li.show1 {
            background-color: white;
            border: 0px;
            border-top: 1px solid #62809D;
            color:#22A5DD;
        }

            #u1 li.show1.sea {
                background-image: url(images/sea1.png);
            }

            #u1 li.show1.air {
                background-image: url(images/air1.png);
            }

            #u1 li.show1.eche {
                background-image: url(images/eche1.png);
            }

            #u1 li.show1.express {
                background-image: url(images/express1.png);
            }

        #u2 li.show { 
            display: block;
            height: 200px;
            background-color: white;
        }
    </style>

　　2:html

 <div style="width: 500px; height: 300px; margin: 0 auto">
        <ul id="u1">
            <li class="sea one show1">海运</li>
            <li class="air one">空运</li>
            <li class="express one">快递</li>
            <li class="eche one">陆运</li>
        </ul>
        <ul id="u2">
            <li class="show">11111111111
            </li>
            <li>22222</li>
            <li>33333</li>
            <li>44444</li>
        </ul>
    </div>

　　3:js

 <script type="text/javascript">
        $(function () {
            $("#u1 li").click(function () {
                var index = $(this).index();
                $(this).addClass("show1").siblings().removeClass("show1");
                //显示相应的li
                $("#u2").children("li").eq(index).addClass("show").siblings().removeClass("show");
            })
        })
    </script>

　　4思路：事先定义好另一个背景图，当动态添加上某一个类之后就启用

定义好了show1 样式后  然后再给sea air...设置好相应的背景 点击Li时就动态添加上show1这个类  则 #u1 li.sea.show1就生效