新做的H5页面（具体应该说是百分比页面）

主要代码

<div class="top" id="headTab">
        <div id="photo"><a href="#" class="active">图文简介</a></div>
        <div id="parameter"><a href="#" class="">产品参数</a></div>
        <div id="system"><a href="#" class="">系统推荐</a></div>
    </div>
    <div class="content">
        <div id="photo1" class="show">
            <!--我是商品的图片简介-->
            <img src="~/Content/Images/bg13.jpg" />
        </div>
        <div id="parameter1" class="hidden">
            <ul class="nvlist">
                <li>
                    <div>****：</div>
                    <div>*****************</div>
                </li>
                <li>
                    <div>****：</div>
                    <div>***********************</div>
                </li>
                <li>
                    <div>****：</div>
                    <div>****************************</div>
                </li>
                <li>
                    <div>****：</div>
                    <div>***************************</div>
                </li>
                <li>
                    <div>****：</div>
                    <div>*****************************************</div>
                </li>
                <li>
                    <div>****：</div>
                    <div>****************</div>
                </li>
                <li>
                    <div>****：</div>
                    <div>*********</div>
                </li>
                <li>
                    <div>****：</div>
                    <div>*******************************</div>
                </li>
                <li>
                    <div>****：</div>
                    <div>**********</div>
                </li>
                <li>&nbsp;</li>
            </ul>
        </div>
        <div id="system1" class="hidden">
            <div class="bordersty" οnclick="redirecter.goCategory(123456)">
                <img src="~/Content/Images/bg10.jpg" />
                <div class="title">
                    *****
                </div>
                <div class="selling">
                    <span>¥130.00
                    </span>
                    <span>520人购买
                    </span>
                </div>
            </div>
            <div class="bordersty">
                <img src="~/Content/Images/bg10.jpg" />
                <div class="title">
                    *****
                </div>
                <div class="selling">
                    <span>¥130.00
                    </span>
                    <span>520人购买
                    </span>
                </div>
            </div>
            <div class="bordersty">
                <img src="~/Content/Images/bg10.jpg" />
                <div class="title">
                    *****
                </div>
                <div class="selling">
                    <span>¥130.00
                    </span>
                    <span>520人购买
                    </span>
                </div>
            </div>
            <div class="bordersty">
                <img src="~/Content/Images/bg10.jpg" />
                <div class="title">
                   *****
                </div>
                <div class="selling">
                    <span>¥130.00
                    </span>
                    <span>520人购买
                    </span>
                </div>
            </div>
            <div class="bordersty">
                <img src="~/Content/Images/bg10.jpg" />
                <div class="title">
                    *****
                </div>
                <div class="selling">
                    <span>¥130.00
                    </span>
                    <span>520人购买
                    </span>
                </div>
            </div>
            <div class="bordersty">
                <img src="~/Content/Images/bg10.jpg" />
                <div class="title">
                    *****
                </div>
                <div class="selling">
                    <span>¥130.00
                    </span>
                    <span>520人购买
                    </span>
                </div>
            </div>
            <div class="bordersty">
                <img src="~/Content/Images/bg10.jpg" />
                <div class="title">
                    *****
                </div>
                <div class="selling">
                    <span>¥130.00
                    </span>
                    <span>520人购买
                    </span>
                </div>
            </div>
            <div class="bordersty">
                <img src="~/Content/Images/bg10.jpg" />
                <div class="title">
                    *****
                </div>
                <div class="selling">
                    <span>¥130.00
                    </span>
                    <span>520人购买
                    </span>
                </div>
            </div>
            <div class="bordersty">
                <img src="~/Content/Images/bg10.jpg" />
                <div class="title">
                    *****
                </div>
                <div class="selling">
                    <span>¥130.00
                    </span>
                    <span>520人购买
                    </span>
                </div>
            </div>
            <div class="bordersty">
                <img src="~/Content/Images/bg10.jpg" />
                <div class="title">
                    *****
                </div>
                <div class="selling">
                    <span>¥130.00
                    </span>
                    <span>520人购买
                    </span>
                </div>
            </div>
        </div>
    </div>

js代码——切换选项卡

<script type="text/javascript">
    $(function () {
        $("#headTab div a").click(function () {
            var id = $(this).parent().attr("id");
            $(this).attr("class", "active").parent().siblings().find("a").attr("class", "");
            $("#" + id + "1").attr("class", "show").siblings().attr("class", "hidden");
    })
})
</script>

Css样式（百分比布局）

body {
    background-color: lightgray;
    font-family: 微软雅黑;
}

.top {
    height: 60px;
    border-bottom: 1px solid gray;
    width: 100%;
    background-color: white;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
}

    .top div {
        float: left;
        width: 33.3%;
        text-align: center;
        height: 40px;
    }

a {
    border: 0px solid red;
    height: 36px;
    display: inline-block;
    width: 80px;
    padding-top: 20px;
    font-family: 微软雅黑;
    color: black;
    text-decoration: none;
}

    a:hover {
        color: #E74E40;
        border-bottom: 4px solid #E74E40;
        font-size: 17px;
    }

.active {
    color: #E74E40;
    border-bottom: 4px solid #E74E40;
    font-size: 17px;
    font-family: 微软雅黑;
}

.content {
    margin-top: 70px;
}

.show {
    display: block;
}

.hidden {
    display: none;
}

#photo1 img {
    width: 100%;
    display: block;
}

.nvlist {
    list-style: outside none none;
    border: 1px solid gray;
    background-color: white;
    padding-left: 15px;
    padding-right: 15px;
}

    .nvlist li {
        line-height: 25px;
        border-bottom: 1px solid gray;
        margin: 0px 0px -1px;
        padding-left: 15px;
        font-size: 12px;
    }

        .nvlist li div:first-child {
            float: left;
            width: 25%;
            border: 0px solid red;
        }

        .nvlist li div:last-child {
            width: 65%;
            border: 0px solid blue;
            margin-left: 30%;
            border: 0px solid red;
        }
/*
                .nvlist li:hover {
                    background-color: #DDDDDD;
                    cursor: pointer;
                }

                .nvlist li:last-child:hover {
                    background-color: white;
                    cursor: default;
                }*/

.bordersty {
    width: 48%;
    float: left;
    margin-left: 1%;
    margin-top: 1%;
    background-color: white;
    border: 1px solid gray;
}

    .bordersty img {
        width: 90%;
        margin-left: 5%;
        margin-top: 5%;
        display: block;
    }

.title {
    margin-left: 5%;
    line-height: 20px;
    border: 0px solid red;
    width: 80%;
    font-size: 14px;
    padding-top: 10px;
    font-family: 微软雅黑;
}

.selling {
    margin-left: 5%;
    line-height: 20px;
    border: 0px solid red;
    width: 95%;
    float: left;
    font-size: 12px;
}

    .selling span:first-child {
        float: left;
    }

    .selling span:last-child {
        float: right;
        margin-right: 20%;
        margin-bottom: 10px;
    }

 

转载于:https://www.cnblogs.com/xibianriluo/p/4726393.html