新做的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> </li>
</ul>
</div>
<div id="system1" class="hidden">
<div class="bordersty" onclick="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>

<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>

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;
}