jQuery商品属性选择的实现

时间：2015-5-17类别：Web前端
jQuery商品属性选择的实现

jQuery商品属性选择的实现
一、效果图
二、右下角图片
三、实现代码
HTML 代码复制

<html>
    <head> 
        <style>...
            .yListr {...}{
                width: 690px;
                font-family: "微软雅黑";
                margin: 46px auto 0 auto;
            }

            .yListr ul {...}{
                border-bottom: 1px solid #dcdcdc;
                padding-bottom: 10px;
                margin-bottom: 13px;
            }

            .yListr ul li {...}{
                height: 36px;
                margin-bottom: 23px;
            }

            .yListr ul li span {...}{
                color: #000000;
                font-size: 14px;
                line-height: 36px;
                display: inline-block;
                width: 42px;
                padding-left: 4px;
            }

            .yListr ul li em {...}{
                cursor: pointer;
                color: #666666;
                font-size: 14px;
                display: inline-block;
                padding: 0 10px;
                font-style: normal;
                border: 1px solid #dcdcdc;
                line-height: 34px;
                height: 34px;
            }

            .yListr ul li em.yListrclickem {...}{
                line-height: 32px;
                border: 2px solid #e9630a;
                height: 32px;
                position: relative;
                padding: 0 9px;
            }

            .yListr ul li em.yListrclickem i {...}{
                display: block;
                width: 15px;
                height: 14px;
                background: url(righbt.png) no-repeat 0 0;
                right: -1px;
                bottom: -1px;
                position: absolute;
            }

            .yListr .colorp00 {...}{
                color: #333333;
                font-size: 18px;
                line-height: 50px;
            }

            .yListr .colorp00 span {...}{
                color: #ed610c;
                font-size: 14px;
                padding-left: 20px;
            }

            .yListr .colorp00 em {...}{
                font-style: normal;
            }

            .yListr form input, .yListr form select {...}{
                outline: none;
                border: 1px solid #dcdcdc;
                width: 86px;
                height: 34px;
                font-size: 14px;
                color: #333333;
                padding-left: 8px;
            }

            .yListr form select {...}{
                height: 36px;
            }

            .yListr form .YImmediatelyininstallment {...}{
                font-size: 24px;
                color: #ffffff;
                text-align: center;
                display: block;
                width: 332px;
                height: 50px;
                line-height: 50px;
                border-radius: 3px;
                background: #e9630a;
                margin-top: 42px;
            }
        </style>
    </head>
    <body>

        <li>
            <li>
                <li class="yListr">
                        <ul>
                            <li><span>颜色</span> <em class="yListrclickem">深灰色<i></i></em> <em>金色<i></i></em> <em>银色<i></i></em> </li>
                            <li><span>内存</span> <em class="yListrclickem">16G ROM<i></i></em> </li>
                            <li><span>尺寸</span> <em class="yListrclickem">5.5寸<i></i></em> </li>
                            <li><span>尺寸</span> <em class="yListrclickem">港版（二网）<i></i></em> <em>类型<i></i></em>
                            </li>
                        </ul>
                </li>
            </li>
        </li>
       
        <script type="text/javascript" src="jquery.js"></script> 
        <script type="text/javascript">...
            $(function() ...{
                $(".yListr ul li em").click(function() ...{
                    $(this).addClass("yListrclickem").siblings().removeClass("yListrclickem");
                })
            })
        </script>
    </body>
</html>
标签：
jquery
jQuery商品属性选择的实现

jQuery商品属性选择的实现

猜您喜欢

热门推荐
