Tp5商品详情页选中框的移动
详情html 页面
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>产品详情页</title>
<link rel="stylesheet" type="text/css" href="__STATIC__/home/css/all.css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/home/css/pages-item.css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/home/css/pages-zoom.css" />
<script type="text/javascript" src="__STATIC__/home/js/all.js"></script>
<script type="text/javascript" src="__STATIC__/home/js/pages/index.js"></script>
<script type="text/javascript" src="__STATIC__/home/js/pages/item.js"></script>
</head>
<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="nav-bottom">
<!--顶部-->
<div class="nav-top">
<div class="top">
<div class="py-container">
<div class="shortcut">
<ul class="fl">
<li class="f-item">品优购欢迎您！</li>
<li class="f-item">请<a href="login.html" target="_blank">登录</a> <span><a href="register.html" target="_blank">免费注册</a></span></li>
</ul>
<ul class="fr">
<li class="f-item">我的订单</li>
<li class="f-item space"></li>
<li class="f-item"><a href="home.html" target="_blank">我的品优购</a></li>
<li class="f-item space"></li>
<li class="f-item">品优购会员</li>
<li class="f-item space"></li>
<li class="f-item">企业采购</li>
<li class="f-item space"></li>
<li class="f-item">关注品优购</li>
<li class="f-item space"></li>
<li class="f-item" id="service">
<span>客户服务</span>
<ul class="service">
<li><a href="cooperation.html" target="_blank">合作招商</a></li>
<li><a href="shoplogin.html" target="_blank">商家后台</a></li>
</ul>
</li>
<li class="f-item space"></li>
<li class="f-item">网站导航</li>
</ul>
</div>
</div>
</div>
<!--头部-->
<div class="header">
<div class="py-container">
<div class="yui3-g Logo">
<div class="yui3-u Left logoArea">
<a class="logo-bd" title="品优购" href="JD-index.html" target="_blank"></a>
</div>
<div class="yui3-u Center searchArea">
<div class="search">
<form action="" class="sui-form form-inline">
<!--searchAutoComplete-->
<div class="input-append">
<input type="text" id="autocomplete" type="text" class="input-error input-xxlarge" />
<button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
</div>
</form>
</div>
<div class="hotwords">
<ul>
<li class="f-item">品优购首发</li>
<li class="f-item">亿元优惠</li>
<li class="f-item">9.9元团购</li>
<li class="f-item">每满99减30</li>
<li class="f-item">亿元优惠</li>
<li class="f-item">9.9元团购</li>
<li class="f-item">办公用品</li>
</ul>
</div>
</div>
<div class="yui3-u Right shopArea">
<div class="fr shopcar">
<div class="show-shopcar" id="shopcar">
<span class="car"></span>
<a class="sui-btn btn-default btn-xlarge" href="cart.html" target="_blank">
<span>我的购物车</span>
<i class="shopnum">0</i>
</a>
<div class="clearfix shopcarlist" id="shopcarlist" style="display:none">
<p>"啊哦，你的购物车还没有商品哦！"</p>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-g NavList">
<div class="all-sorts-list">
<div class="yui3-u Left all-sort">
<h4>全部商品分类</h4>
</div>
<div class="sort">
<div class="all-sort-list2">
<div class="item bo">
<h3><a href="">图书、音像、数字商品</a></h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore1">
<dt><a href="">电子书</a></dt>
<dd><a href="">免费</a><a href="">小说</a></em><a href="">励志与成功</a><em><a href="">婚恋/两性</a></em><em><a href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><a href="">家用电器</a></h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore1">
<dt><a href="">电子书1</a></dt>
<dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a href="">婚恋/两性</a></em><em><a href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="">数字音乐</a></dt>
<dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="">音像</a></dt>
<dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a href="">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a href="">传记</a></em><em><a href="">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="">历史</a></em><em><a href="">心理学</a></em><em><a href="">政治/军事</a></em><em><a href="">国学/古籍</a></em><em><a href="">哲学/宗教</a></em><em><a href="">社会科学</a></em></dd>
</dl>
<dl class="fore6">
<dt>经管励志</dt>
<dd><em><a href="">经济</a></em><em><a href="">金融与投资</a></em><em><a href="">管理</a></em><em><a href="">励志与成功</a></em></dd>
</dl>
<dl class="fore7">
<dt>生活</dt>
<dd><em><a href="">家庭与育儿</a></em><em><a href="">旅游/地图</a></em><em><a href="">烹饪/美食</a></em><em><a href="">时尚/美妆</a></em><em><a href="">家居</a></em><em><a href="">婚恋与两性</a></em><em><a href="">娱乐/休闲</a></em><em><a href="">健身与保健</a></em><em><a href="">动漫/幽默</a></em><em><a href="">体育/运动</a></em></dd>
</dl>
<dl class="fore8">
<dt>科技</dt>
<dd><em><a href="">科普</a></em><em><a href="">IT</a></em><em><a href="">建筑</a></em><em><a href="">医学</a></em><em><a href="">工业技术</a></em><em><a href="">电子/通信</a></em><em><a href="">农林</a></em><em><a href="">科学与自然</a></em></dd>
</dl>
<dl class="fore9">
<dt>少儿</dt>
<dd><em><a href="">少儿</a></em><em><a href="">0-2岁</a></em><em><a href="">3-6岁</a></em><em><a href="">7-10岁</a></em><em><a href="">11-14岁</a></em></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><a href="">手机、数码</a></h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore1">
<dt><a href="">电子书2</a></dt>
<dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a href="">婚恋/两性</a></em><em><a href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="">数字音乐</a></dt>
<dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="">音像</a></dt>
<dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a href="">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a href="">传记</a></em><em><a href="">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="">历史</a></em><em><a href="">心理学</a></em><em><a href="">政治/军事</a></em><em><a href="">国学/古籍</a></em><em><a href="">哲学/宗教</a></em><em><a href="">社会科学</a></em></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><a href="">电脑、办公</a></h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore1">
<dt><a href="">电子书3</a></dt>
<dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a href="">婚恋/两性</a></em><em><a href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="">数字音乐</a></dt>
<dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="">音像</a></dt>
<dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a href="">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a href="">传记</a></em><em><a href="">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="">历史</a></em><em><a href="">心理学</a></em><em><a href="">政治/军事</a></em><em><a href="">国学/古籍</a></em><em><a href="">哲学/宗教</a></em><em><a href="">社会科学</a></em></dd>
</dl>
<dl class="fore6">
<dt>经管励志</dt>
<dd><em><a href="">经济</a></em><em><a href="">金融与投资</a></em><em><a href="">管理</a></em><em><a href="">励志与成功</a></em></dd>
</dl>
<dl class="fore7">
<dt>生活</dt>
<dd><em><a href="">家庭与育儿</a></em><em><a href="">旅游/地图</a></em><em><a href="">烹饪/美食</a></em><em><a href="">时尚/美妆</a></em><em><a href="">家居</a></em><em><a href="">婚恋与两性</a></em><em><a href="">娱乐/休闲</a></em><em><a href="">健身与保健</a></em><em><a href="">动漫/幽默</a></em><em><a href="">体育/运动</a></em></dd>
</dl>
<dl class="fore8">
<dt>科技</dt>
<dd><em><a href="">科普</a></em><em><a href="">IT</a></em><em><a href="">建筑</a></em><em><a href="">医学</a></em><em><a href="">工业技术</a></em><em><a href="">电子/通信</a></em><em><a href="">农林</a></em><em><a href="">科学与自然</a></em></dd>
</dl>
<dl class="fore9">
<dt>少儿</dt>
<dd><em><a href="">少儿</a></em><em><a href="">0-2岁</a></em><em><a href="">3-6岁</a></em><em><a href="">7-10岁</a></em><em><a href="">11-14岁</a></em></dd>
</dl>
<dl class="fore10">
<dt>教育</dt>
<dd><em><a href="">教材教辅</a></em><em><a href="">考试</a></em><em><a href="">外语学习</a></em></dd>
</dl>
<dl class="fore11">
<dt>其它</dt>
<dd><em><a href="">英文原版书</a></em><em><a href="">港台图书</a></em><em><a href="">工具书</a></em><em><a href="">套装书</a></em><em><a href="">杂志/期刊</a></em></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><a href="">家居、家具、家装、厨具</a></h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore1">
<dt><a href="">电子书4</a></dt>
<dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a href="">婚恋/两性</a></em><em><a href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="">数字音乐</a></dt>
<dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="">音像</a></dt>
<dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a href="">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a href="">传记</a></em><em><a href="">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="">历史</a></em><em><a href="">心理学</a></em><em><a href="">政治/军事</a></em><em><a href="">国学/古籍</a></em><em><a href="">哲学/宗教</a></em><em><a href="">社会科学</a></em></dd>
</dl>
<dl class="fore6">
<dt>经管励志</dt>
<dd><em><a href="">经济</a></em><em><a href="">金融与投资</a></em><em><a href="">管理</a></em><em><a href="">励志与成功</a></em></dd>
</dl>
<dl class="fore7">
<dt>生活</dt>
<dd><em><a href="">家庭与育儿</a></em><em><a href="">旅游/地图</a></em><em><a href="">烹饪/美食</a></em><em><a href="">时尚/美妆</a></em><em><a href="">家居</a></em><em><a href="">婚恋与两性</a></em><em><a href="">娱乐/休闲</a></em><em><a href="">健身与保健</a></em><em><a href="">动漫/幽默</a></em><em><a href="">体育/运动</a></em></dd>
</dl>
<dl class="fore8">
<dt>科技</dt>
<dd><em><a href="">科普</a></em><em><a href="">IT</a></em><em><a href="">建筑</a></em><em><a href="">医学</a></em><em><a href="">工业技术</a></em><em><a href="">电子/通信</a></em><em><a href="">农林</a></em><em><a href="">科学与自然</a></em></dd>
</dl>
<dl class="fore9">
<dt>少儿</dt>
<dd><em><a href="">少儿</a></em><em><a href="">0-2岁</a></em><em><a href="">3-6岁</a></em><em><a href="">7-10岁</a></em><em><a href="">11-14岁</a></em></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><a href="">服饰内衣</a></h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore1">
<dt><a href="">电子书5</a></dt>
<dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a href="">婚恋/两性</a></em><em><a href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="">数字音乐</a></dt>
<dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="">音像</a></dt>
<dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a href="">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a href="">传记</a></em><em><a href="">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="">历史</a></em><em><a href="">心理学</a></em><em><a href="">政治/军事</a></em><em><a href="">国学/古籍</a></em><em><a href="">哲学/宗教</a></em><em><a href="">社会科学</a></em></dd>
</dl>
<dl class="fore6">
<dt>经管励志</dt>
<dd><em><a href="">经济</a></em><em><a href="">金融与投资</a></em><em><a href="">管理</a></em><em><a href="">励志与成功</a></em></dd>
</dl>
<dl class="fore7">
<dt>生活</dt>
<dd><em><a href="">家庭与育儿</a></em><em><a href="">旅游/地图</a></em><em><a href="">烹饪/美食</a></em><em><a href="">时尚/美妆</a></em><em><a href="">家居</a></em><em><a href="">婚恋与两性</a></em><em><a href="">娱乐/休闲</a></em><em><a href="">健身与保健</a></em><em><a href="">动漫/幽默</a></em><em><a href="">体育/运动</a></em></dd>
</dl>
<dl class="fore8">
<dt>科技</dt>
<dd><em><a href="">科普</a></em><em><a href="">IT</a></em><em><a href="">建筑</a></em><em><a href="">医学</a></em><em><a href="">工业技术</a></em><em><a href="">电子/通信</a></em><em><a href="">农林</a></em><em><a href="">科学与自然</a></em></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><a href="">个护化妆</a></h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore1">
<dt><a href="">电子书6</a></dt>
<dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a href="">婚恋/两性</a></em><em><a href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="">数字音乐</a></dt>
<dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="">音像</a></dt>
<dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a href="">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a href="">传记</a></em><em><a href="">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="">历史</a></em><em><a href="">心理学</a></em><em><a href="">政治/军事</a></em><em><a href="">国学/古籍</a></em><em><a href="">哲学/宗教</a></em><em><a href="">社会科学</a></em></dd>
</dl>
<dl class="fore6">
<dt>经管励志</dt>
<dd><em><a href="">经济</a></em><em><a href="">金融与投资</a></em><em><a href="">管理</a></em><em><a href="">励志与成功</a></em></dd>
</dl>
<dl class="fore7">
<dt>生活</dt>
<dd><em><a href="">家庭与育儿</a></em><em><a href="">旅游/地图</a></em><em><a href="">烹饪/美食</a></em><em><a href="">时尚/美妆</a></em><em><a href="">家居</a></em><em><a href="">婚恋与两性</a></em><em><a href="">娱乐/休闲</a></em><em><a href="">健身与保健</a></em><em><a href="">动漫/幽默</a></em><em><a href="">体育/运动</a></em></dd>
</dl>
<dl class="fore8">
<dt>科技</dt>
<dd><em><a href="">科普</a></em><em><a href="">IT</a></em><em><a href="">建筑</a></em><em><a href="">医学</a></em><em><a href="">工业技术</a></em><em><a href="">电子/通信</a></em><em><a href="">农林</a></em><em><a href="">科学与自然</a></em></dd>
</dl>
<dl class="fore9">
<dt>少儿</dt>
<dd><em><a href="">少儿</a></em><em><a href="">0-2岁</a></em><em><a href="">3-6岁</a></em><em><a href="">7-10岁</a></em><em><a href="">11-14岁</a></em></dd>
</dl>
<dl class="fore10">
<dt>教育</dt>
<dd><em><a href="">教材教辅</a></em><em><a href="">考试</a></em><em><a href="">外语学习</a></em></dd>
</dl>
<dl class="fore11">
<dt>其它</dt>
<dd><em><a href="">英文原版书</a></em><em><a href="">港台图书</a></em><em><a href="">工具书</a></em><em><a href="">套装书</a></em><em><a href="">杂志/期刊</a></em></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><a href="">运动健康</a></h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore1">
<dt><a href="">电子书7</a></dt>
<dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a href="">婚恋/两性</a></em><em><a href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="">数字音乐</a></dt>
<dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="">音像</a></dt>
<dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a href="">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a href="">传记</a></em><em><a href="">艺术</a></em></dd>
</dl>
</div>
<div class="cat-right">
<dl class="categorys-brands" clstag="homepage|keycount|home2013|0601d">
<dt>推荐品牌出版商</dt>
<dd>
<ul>
<li>
<a href="">中华书局</a>
</li>
<li>
<a href="">人民邮电出版社</a>
</li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><a href="">汽车用品</a></h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore1">
<dt><a href="">电子书8</a></dt>
<dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a href="">婚恋/两性</a></em><em><a href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="">数字音乐</a></dt>
<dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="">音像</a></dt>
<dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a href="">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a href="">传记</a></em><em><a href="">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="">历史</a></em><em><a href="">心理学</a></em><em><a href="">政治/军事</a></em><em><a href="">国学/古籍</a></em><em><a href="">哲学/宗教</a></em><em><a href="">社会科学</a></em></dd>
</dl>
<dl class="fore6">
<dt>经管励志</dt>
<dd><em><a href="">经济</a></em><em><a href="">金融与投资</a></em><em><a href="">管理</a></em><em><a href="">励志与成功</a></em></dd>
</dl>
<dl class="fore7">
<dt>生活</dt>
<dd><em><a href="">家庭与育儿</a></em><em><a href="">旅游/地图</a></em><em><a href="">烹饪/美食</a></em><em><a href="">时尚/美妆</a></em><em><a href="">家居</a></em><em><a href="">婚恋与两性</a></em><em><a href="">娱乐/休闲</a></em><em><a href="">健身与保健</a></em><em><a href="">动漫/幽默</a></em><em><a href="">体育/运动</a></em></dd>
</dl>
<dl class="fore8">
<dt>科技</dt>
<dd><em><a href="">科普</a></em><em><a href="">IT</a></em><em><a href="">建筑</a></em><em><a href="">医学</a></em><em><a href="">工业技术</a></em><em><a href="">电子/通信</a></em><em><a href="">农林</a></em><em><a href="">科学与自然</a></em></dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><a href="">彩票、旅行</a></h3>
</div>
<div class="item">
<h3><a href="">理财、众筹</a></h3>
</div>
<div class="item">
<h3><a href="">母婴、玩具</a></h3>
</div>
<div class="item">
<h3><a href="">箱包</a></h3>
</div>
<div class="item">
<h3><a href="">运动户外</a></h3>
</div>
<div class="item">
<h3><a href="">箱包</a></h3>
</div>
</div>
</div>
</div>
<div class="yui3-u Center navArea">
<ul class="nav">
<li class="f-item">服装城</li>
<li class="f-item">美妆馆</li>
<li class="f-item">品优超市</li>
<li class="f-item">全球购</li>
<li class="f-item">闪购</li>
<li class="f-item">团购</li>
<li class="f-item">有趣</li>
<li class="f-item"><a href="seckill-index.html" target="_blank">秒杀</a></li>
</ul>
</div>
<div class="yui3-u Right"></div>
</div>
</div>
</div>
</div>
</div>
<div class="py-container">
<div id="item">
<div class="crumb-wrap">
<ul class="sui-breadcrumb">
<li>
<a href="#">手机、数码、通讯</a>
</li>
<li>
<a href="#">手机</a>
</li>
<li>
<a href="#">Apple苹果</a>
</li>
<li class="active">iphone 6S系类</li>
</ul>
</div>
<!--product-info-->
<div class="product-info">
<div class="fl preview-wrap">
<!--放大镜效果-->
<div class="zoom">
<!--默认第一个预览-->
<div id="preview" class="spec-preview">
<span class="jqzoom"><img jqimg="__STATIC__/home/img/_/b1.png" src="__STATIC__/home/img/_/s1.png" /></span>
</div>
<!--下方的缩略图-->
<div class="spec-scroll">
<a class="prev"><</a>
<!--左右按钮-->
<div class="items">
<ul>
<li><img src="__STATIC__/home/img/_/s1.png" bimg="__STATIC__/home/img/_/b1.png" onmousemove="preview(this)" /></li>
<li><img src="__STATIC__/home/img/_/s2.png" bimg="__STATIC__/home/img/_/b2.png" onmousemove="preview(this)" /></li>
<li><img src="__STATIC__/home/img/_/s3.png" bimg="__STATIC__/home/img/_/b3.png" onmousemove="preview(this)" /></li>
<li><img src="__STATIC__/home/img/_/s1.png" bimg="__STATIC__/home/img/_/b1.png" onmousemove="preview(this)" /></li>
<li><img src="__STATIC__/home/img/_/s2.png" bimg="__STATIC__/home/img/_/b2.png" onmousemove="preview(this)" /></li>
<li><img src="__STATIC__/home/img/_/s3.png" bimg="__STATIC__/home/img/_/b3.png" onmousemove="preview(this)" /></li>
<li><img src="__STATIC__/home/img/_/s1.png" bimg="__STATIC__/home/img/_/b1.png" onmousemove="preview(this)" /></li>
<li><img src="__STATIC__/home/img/_/s2.png" bimg="__STATIC__/home/img/_/b2.png" onmousemove="preview(this)" /></li>
<li><img src="__STATIC__/home/img/_/s3.png" bimg="__STATIC__/home/img/_/b3.png" onmousemove="preview(this)" /></li>
</ul>
</div>
<a class="next">></a>
</div>
</div>
</div>
<div class="fr itemInfo-wrap">
<div class="sku-name">
<h4>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h4>
</div>
<div class="news"><span>推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</span></div>
<div class="summary">
<div class="summary-wrap">
<div class="fl title">
<i>价 格</i>
</div>
<div class="fl price">
<i>¥</i>
<em>5299.00</em>
<span>降价通知</span>
</div>
<div class="fr remark">
<i>累计评价</i><em>612188</em>
</div>
</div>
<div class="summary-wrap">
<div class="fl title">
<i>促 销</i>
</div>
<div class="fl fix-width">
<i class="red-bg">加价购</i>
<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
</div>
</div>
</div>
<div class="support">
<div class="summary-wrap">
<div class="fl title">
<i>支 持</i>
</div>
<div class="fl fix-width">
<em class="t-gray">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em>
</div>
</div>
<div class="summary-wrap">
<div class="fl title">
<i>配 送 至</i>
</div>
<div class="fl fix-width">
<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
</div>
</div>
</div>
<div class="clearfix choose">
<div id="specification" class="summary-wrap clearfix">
{foreach $reg as $v}
<dl>
<dt>
<div class="fl title">
<i>{$v.spec_name}</i>
</div>
</dt>
{foreach $v['spec_values'] as $k=>$value}
<dd><a spec_value_id="{$value.id}" href="javascript:;" class="{if($k==0)}selected{/if}">{$value.spec_value}<span title="点击取消选择"> </span></a></dd>
{/foreach}
</dl>
{/foreach}
</div>
<div class="summary-wrap">
<div class="fl title">
<div class="control-group">
<div class="controls">
<input id="number" autocomplete="off" type="text" value="1" minnum="1" class="itxt" />
<a href="javascript:void(0)" id="plus" class="increment plus">+</a>
<a href="javascript:void(0)" id="mins" class="increment mins">-</a>
</div>
</div>
</div>
<div class="fl">
<ul class="btn-choose unstyled">
<li>
<button class="addshopcar" id='addshopcar'>加入购物车</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<form action="">
<input type="hidden" name="goods_id" value="{goods.id}">
<input type="hidden" name="goods_id" value="{goods.id}">
<input type="hidden" name="spec_goods_id" value="">
<input type="hidden" name="number" value="">
</form>
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
<div class="tbar-cart-item" >
<div class="jtc-item-promo">
<em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
<div class="promo-text">已购满600元，您可领赠品</div>
</div>
<div class="jtc-item-goods">
<span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50" /></a></span>
<div class="p-name">
<a href="#">{1}</a>
</div>
<div class="p-price"><strong>¥{3}</strong>×{4} </div>
<a href="#none" class="p-del J-del">删除</a>
</div>
</div>
</script>
<!--侧栏面板结束-->
</body>
</html>
<script>
$(function(){
//规格值ids 到 规格商品id的映射关系
var value_ids_map = {$value_ids_map};
// var value_ids_map = {"18_21":{"id":813,"price":"1000.00"},"18_22":{"id":814,"price":"1000.00"},"19_21":{"id":815,"price":"1000.00"},"19_22":{"id":816,"price":"1000.00"}};
//加入购物车
$('#addshopcar').click(function(){
//获取选中的规格值的组合
var value_ids = '';//18_21
$('.selected').each(function(i,v){
value_ids += $(v).attr('spec_value_id') + '_';
});
//去除最后一个下划线 value_ids = '18_21'
value_ids = value_ids.slice(0, -1);
//value_ids = '18_21'
//获取对应的规格商品SKU的id值 考虑到部分商品可能没有SKU 使用三元判断
var spec_goods_id = value_ids_map[value_ids] ? value_ids_map[value_ids].id : '';
// console.log(spec_goods_id);
//后续加入购物车 需要使用spec_goods_id
//将spec_goods_id放到隐藏表单中
$('input[name=spec_goods_id]').val(spec_goods_id);
//获取购买数量
var number = $('#number').val();
//将购买数量放到隐藏表单中
$('input[name=number]').val(number);
//提交表单
$('form').submit();
});
//规格值选中效果
$('#specification').find('a').click(function(){
//给当前行标签 移除selected这个class
$(this).closest('dl').find('a').removeClass('selected');
//再给当前点击的a标签加上selected
$(this).addClass('selected');
//获取选中的规格值的组合
var value_ids = '';
$('.selected').each(function(i,v){
value_ids += $(v).attr('spec_value_id') + '_';
});
//去除最后一个下划线 value_ids = '19_21_' '19_21'
value_ids = value_ids.slice(0, -1);
//获取对应的规格商品SKU的id值
var spec_goods_price = value_ids_map[value_ids].price;
//console.log(spec_goods_price);
//将价格显示到页面
$('#goods_price').html(spec_goods_price);
});
//加号
$('#plus').click(function(){
//获取数量
var number = parseInt( $('#number').val() );
//计算新的数量
number += 1;
//展示新的数量
$('#number').val(number);
});
//减号
$('#mins').click(function(){
//获取数量
var number = parseInt( $('#number').val() );
//计算新的数量
if(number == 1) return;
number -= 1;
//展示新的数量
$('#number').val(number);
});
</script>
控制器 页面展示数据
public function create()
{
$id = 1;
// 取出 id=1的商品 和商品规格
$goods = \app\admin\model\Goods::with('specGoods')->find($id);
// return json($goods);
if (!empty($goods['spec_goods'])) {
if ($goods['spec_goods'][0]['price'] > 0) {
$goods['goods_price'] = $goods['spec_goods'][0]['price'];
}
if ($goods['spec_goods'][0]['cost_price'] > 0) {
$goods['cost_price'] = $goods['spec_goods'][0]['cost_price'];
}
if ($goods['spec_goods'][0]['store_count'] > 0) {
$goods['store_count'] = $goods['spec_goods'][0]['store_count'];
} else {
$goods['store_count'] = 0;
}
}
// $goods['id'];
// 取出value_ids这一列 循环处理
$value_ids = array_unique(explode('_', implode('_', array_column($goods['spec_goods'], 'value_ids'))));
$Value = SpecValue::with('Spec')->where('id', 'in', $value_ids)->select();
$spec_values = (new Collection($Value))->toArray();
$reg = [];
foreach ($spec_values as $v) {
$reg[$v['spec_id']] = [
'spec_id' => $v['spec_id'],
'spec_name' => $v['spec_name'],
'spec_values' => []
];
}
foreach ($spec_values as $v) {
$reg[$v['spec_id']]['spec_values'][] = $v;
}
//
$value_ids_msp = [];
foreach ($goods['spec_goods'] as $v) {
$row = [
'id' => $v['id'],
'price' => $v['price']
];
$value_ids_msp[$v['value_ids']] = $row;
}
// [1_3] => Array([id] => 1 [price] => 10.00 )
// [1_4] => Array([id] => 2 [price] => 20.00 )
// [2_3] => Array([id] => 3 [price] => 10.00 )
// [2_4] => Array([id] =>4 [price] => 20.00 )
$value_ids_msp=json_encode($value_ids_msp);
// print_r($value_ids_msp);
// die();
// print_r($reg);die();
// return json($specValue);
return view('create',['goods'=>$goods,'value_ids_map'=>$value_ids_msp,'reg'=>$reg]);
}
模型 ：商品表关联 商品规格表
class Goods extends Model
{
function specGoods(){
return $this->hasMany('specGoods','goods_id','id');
}
}
规格表关联规格值表
class SpecValue extends Model
{
function spec(){
return $this->belongsTo('Spec','spec_id','id')->bind('spec_name');
}
}
浙公网安备 33010602011771号