商品详情页购物规格选择框-html代码-BFW代码库

代码语言：html

所属分类：电商

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        var sys_item = {
            "mktprice": "13.00",
            "price": "6.80",
            "sys_attrprice": {
                "3_13": {
                    "price": "6.80",
                    "mktprice": "13.00"
                },
                "3_14": {
                    "price": "7.80",
                    "mktprice": "14.00"
                },
                "3_16": {
                    "price": "8.80",
                    "mktprice": "15.00"
                },
                "3_17": {
                    "price": "9.80",
                    "mktprice": "16.00"
                },
                "4_13": {
                    "price": "6.80",
                    "mktprice": "13.00"
                },
                "4_14": {
                    "price": "7.80",
                    "mktprice": "14.00"
                },
                "4_16": {
                    "price": "8.80",
                    "mktprice": "15.00"
                },
                "4_17": {
                    "price": "9.80",
                    "mktprice": "16.00"
                },
                "8_13": {
                    "price": "6.80",
                    "mktprice": "13.00"
                },
                "8_14": {
                    "price": "7.80",
                    "mktprice": "1400"
                },
                "8_16": {
                    "price": "8.80",
                    "mktprice": "15.00"
                },
                "8_17": {
                    "price": "9.80",
                    "mktprice": "16.00"
                },
                "9_13": {
                    "price": "6.80",
                    "mktprice": "13.00"
                },
                "9_14": {
                    "price": "7.80",
                    "mktprice": "14.00"
                },
                "9_16": {
                    "price": "8.80",
                    "mktprice": "15.00"
                },
                "9_17": {
                    "price": "9.80",
                    "mktprice": "16.00"
                },
                "10_13": {
                    "price": "6.80",
                    "mktprice": "13.00"
                },
                "10_14": {
                    "price": "7.80",
                    "mktprice": "14.00"
                },
                "10_16": {
                    "price": "8.80",
                    "mktprice": "15.00"
                },
                "10_17": {
                    "price": "9.80",
                    "mktprice": "16.00"
                },
                "12_13": {
                    "price": "6.80",
                    "mktprice": "13.00"
                },
                "12_14": {
                    "price": "7.80",
                    "mktprice": "14.00"
                },
                "12_16": {
                    "price": "8.80",
                    "mktprice": "15.00"
                },
                "12_17": {
                    "price": "9.80",
                    "mktprice": "16.00"
                }}};


        //获取对应属性的价格
        function getattrprice() {
            var defaultstats = true;
            var _val = '';
            var _resp = {
                mktprice: ".sys_item_mktprice",
                price: ".sys_item_price"
            }  //输出对应的class
            $(".sys_item_spec .sys_item_specpara").each(function() {
                var i = $(this);
                var v = i.attr("data-attrval");
                if (!v) {
                    defaultstats = false;
                } else {
                    _val += _val != ""?"_": "";
                    _val += v;
                }
            })
            if (!!defaultstats) {
                _mktprice = sys_item['sys_attrprice'][_val]['mktprice'];
                _price = sys_item['sys_attrprice'][_val]['price'];
            } else {
                _mktprice = sys_item['mktprice'];
                _price = sys_item['price'];
            }
            //输出价格
            $(_resp.mktprice).text(_mktprice); ///其中的math.round为截取小数点位数
            $(_resp.price).text(_price);
        }
        bready(function() {
            $(".sys_item_spec .sys_item_specpara").each(function() {
                var i = $(this);
                var p = i.find("ul>li");
                p.click(function() {
                    if (!!$(this).hasClass("selected")) {
                        $(this).removeClass("selected");
                        i.removeAttr("data-attrval");
                    } else {
                        $(this).addClass("selected").siblings("li").removeClass("selected");
                        i.attr("data-attrval", $(this).attr("data-aid"))
                    }
                    getattrprice() //输出价格
                })
            })
        });
    </script>
    <style>
@charset "utf-8";
        /* CSS Document */

        * {
            margin: 0;
            padding: 0;
            -webkit-text-size-adjust: none;
        }
        body {
            background: #fff;
            font-size: 12px;
            color: #555;
            font-family: Tahoma, Geneva, sans-serif;
            padding: 100px 100px;
        }
        a {
            color: #555;
            text-decoration: none;
        }
        a:hover {
            color: #c00;
            text-decoration: underline;
        }
        img {
            border: none;
        }

        li {
            list-style: none;
        }

        .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
        * html .clearfix {
            zoom: 1;
        }

        /* IE6 */
        *:first-child+html .clearfix {
            zoom: 1;
        }

        /* IE7 */

        /*tab*/
        .tab {
            line-height: 56px;
            font-size: 14px;
        }
        .tab a {
            color: #07c;
        }
        .tab a:hover {
            color: #c00;
        }
        .tab a.cur {
            font-weight: bold;
        }


        /*商品详细页*/
        /*iteminfo*/
        .iteminfo {}
        .iteminfo_tit {
            color: #333;
            font-size: 22px;
            font-family: "微软雅黑",Arial, Helvetica, sans-serif;
            border-bottom: 1px solid #e3e3e3;
            font-weight: normal;
            padding-bottom: 12px;
   .........完整代码请登录后点击上方下载按钮下载查看