下面的代码是切换宝贝详情（info栏）、全部评价（comment栏）、
猜你喜欢（youlike栏）的代码，请讲一讲他是如何实现将三栏丝滑切换的
html代码：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>商品详情</title>
<link rel="stylesheet" href="css/basic.css"/>
<link rel="stylesheet" type="text/css" href="css/basic.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/optstyle.css" />
<link rel="stylesheet" type="text/css" href="css/infoStyle.css" />
</head>
<body>
<!--顶部导航条 -->
<div class="mr-container header">
<ul class="message-l">
<div class="topMessage">
<div class="menu-hd">
<a href="login.html" target="_top" class="h" style="color: red">亲，请登录</a>
<a href="register.html" target="_top" style="color: red">免费注册</a>
</div>
</div>
</ul>
<ul class="message-r">
<div class="topMessage home">
<div class="menu-hd"><a href="mobile.html" style="color:red">手机端</a></div>
</div>
<div class="topMessage home">
<div class="menu-hd"><a href="index.html" target="_top" class="h" style="color:red">商城首页</a></div>
</div>
<div class="topMessage my-shangcheng">
<div class="menu-hd MyShangcheng"><a href="#" target="_top"><i class="mr-icon-user mr-icon-fw"></i>个人中心</a>
</div>
</div>
<div class="topMessage mini-cart">
<div class="menu-hd"><a id="mc-menu-hd" href="shopCart.html" target="_top"><i
class="mr-icon-shopping-cart mr-icon-fw" ></i><span style="color:red">购物车</span><strong id="J_MiniCartNum"
class="h">0</strong></a>
</div>
</div>
<div class="topMessage favorite">
<div class="menu-hd"><a href="#" target="_top"><i class="mr-icon-heart mr-icon-fw"></i><span>收藏夹</span></a>
</div>
</ul>
</div>
<!--悬浮搜索框-->
<div class="nav white">
<div class="logo"><a href="index.html"><img src="images/logo.png"/></a></div>
<div class="logoBig">
<li><a href="index.html"><img src="images/logobig.png"/></a></li>
</div>
<div class="search-bar pr">
<a name="index_none_header_sysc" href="#"></a>
<form>
<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
<input id="ai-topsearch" class="submit mr-btn" value="搜索" index="1" type="submit">
</form>
</div>
</div>
<div class="clear"></div>
<b class="line"></b>
<div class="listMain">
<!--分类-->
<div class="nav-table">
<div class="long-title"><span class="all-goods">全部分类</span></div>
<div class="nav-cont">
<ul>
<li class="index"><a href="#">首页</a></li>
<li class="qc"><a href="#">闪购</a></li>
<li class="qc"><a href="#">生鲜</a></li>
<li class="qc"><a href="#">团购</a></li>
<li class="qc last"><a href="#">全球购</a></li>
</ul>
<div class="nav-extra">
<i class="mr-icon-user-secret mr-icon-md nav-user"></i><b></b>我的福利
<i class="mr-icon-angle-right" style="padding-left: 10px;"></i>
</div>
</div>
</div>
<ol class="mr-breadcrumb mr-breadcrumb-slash">
<li><a href="#">首页</a></li>
<li><a href="#">分类</a></li>
<li class="mr-active">内容</li>
</ol>
<div class="scoll">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/01.jpg" title="pic"/>
</li>
<li>
<img src="images/02.jpg"/>
</li>
<li>
<img src="images/03.jpg"/>
</li>
</ul>
</div>
</section>
</div>
<!--放大镜-->
<div class="item-inform">
<div class="clearfixLeft" id="clearcontent">
<div class="box">
<div class="tb-booth tb-pic tb-s310">
<a href="images/01.jpg"><img src="images/01.jpg" alt="细节展示放大镜特效" rel="images/01.jpg"
class="jqzoom"/></a>
</div>
<ul class="tb-thumb" id="thumblist">
<li class="tb-selected">
<div class="tb-pic tb-s40">
<a href="#"><img src="images/01_small.jpg" mid="images/01_mid.jpg" big="images/01.jpg"></a>
</div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#"><img src="images/02_small.jpg" mid="images/02_mid.jpg" big="images/02.jpg"></a>
</div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#"><img src="images/03_small.jpg" mid="images/03_mid.jpg" big="images/03.jpg"></a>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="clearfixRight">
<!--规格属性-->
<!--名称-->
<div class="tb-detail-hd">
<h1>
华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待
</h1>
</div>
<div class="tb-detail-list">
<!--价格-->
<div class="tb-detail-price">
<li class="price iteminfo_price">
<dt>促销价</dt>
<dd><em>¥</em><b class="sys_item_price">499.00</b></dd>
</li>
<li class="price iteminfo_mktprice">
<dt>原价</dt>
<dd><em>¥</em><b class="sys_item_mktprice">599.00</b></dd>
</li>
<div class="clear"></div>
</div>
<!--地址-->
<dl class="iteminfo_parameter freight">
<dt>配送至</dt>
<div class="iteminfo_freprice">
<div class="mr-form-content address">
<select data-mr-selected>
<option value="a">浙江省</option>
<option value="b">吉林省</option>
</select>
<select data-mr-selected>
<option value="a">温州市</option>
<option value="b">长春市</option>
</select>
<select data-mr-selected>
<option value="a">瑞安区</option>
<option value="b">南关区</option>
</select>
</div>
<div class="pay-logis">
快递<b class="sys_item_freprice">10</b>元
</div>
</div>
</dl>
<div class="clear"></div>
<!--销量-->
<ul class="tm-ind-panel">
<li class="tm-ind-item tm-ind-sellCount canClick">
<div class="tm-indcon"><span class="tm-label">月销量</span><span class="tm-count">1015</span></div>
</li>
<li class="tm-ind-item tm-ind-sumCount canClick">
<div class="tm-indcon"><span class="tm-label">累计销量</span><span class="tm-count">6015</span></div>
</li>
<li class="tm-ind-item tm-ind-reviewCount canClick tm-line3">
<div class="tm-indcon"><span class="tm-label">累计评价</span><span class="tm-count">640</span></div>
</li>
</ul>
<div class="clear"></div>
<!--各种规格-->
<dl class="iteminfo_parameter sys_item_specpara">
<dt class="theme-login">
<div class="cart-title">可选规格<span class="mr-icon-angle-right"></span></div>
</dt>
<dd>
<!--操作页面-->
<div class="theme-popover-mask"></div>
<div class="theme-popover">
<div class="theme-span"></div>
<div class="theme-poptit">
<a href="javascript:;" title="关闭" class="close">×</a>
</div>
<div class="theme-popbod dform">
<form class="theme-signin" name="loginform" action="" method="post">
<div class="theme-signin-left">
<div class="theme-options">
<div class="cart-title">颜色</div>
<ul>
<li class="sku-line selected">荣耀金<i></i></li>
<li class="sku-line">冰河银<i></i></li>
<li class="sku-line">雅典灰<i></i></li>
</ul>
</div>
<div class="theme-options">
<div class="cart-title">套装</div>
<ul>
<li class="sku-line selected">保护套装<i></i></li>
<li class="sku-line">原厂电源<i></i></li>
<li class="sku-line">存储套装<i></i></li>
</ul>
</div>
<div class="theme-options">
<div class="cart-title number">数量</div>
<dd>
<input id="min" class="mr-btn mr-btn-default" name="" type="button" value="-"/>
<input id="text_box" name="" type="text" value="1" style="width:30px;"/>
<input id="add" class="mr-btn mr-btn-default" name="" type="button" value="+"/>
<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
</dd>
</div>
<div class="clear"></div>
<div class="btn-op">
<div class="btn mr-btn mr-btn-warning">确认</div>
<div class="btn close mr-btn mr-btn-warning">取消</div>
</div>
</div>
<div class="theme-signin-right">
<div class="img-info">
<img src="../images/songzi.jpg"/>
</div>
<div class="text-info">
<span class="J_Price price-now">¥39.00</span>
<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
</div>
</div>
</form>
</div>
</div>
</dd>
</dl>
<div class="clear"></div>
<!--活动 -->
<div class="shopPromotion gold">
<div class="hot">
<dt class="tb-metatit">店铺优惠</dt>
<div class="gold-list">
<p>购物满2件打8折，满3件7折</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="pay">
<div class="pay-opt">
<a href="index.html"><span class="mr-icon-home mr-icon-fw">首页</span></a>
<a><span class="mr-icon-heart mr-icon-fw">收藏</span></a>
</div>
<li>
<div class="clearfix tb-btn tb-btn-buy theme-login">
<a id="LikBuy" title="点此按钮到下一步确认购买信息" href="shopCart.html">立即购买</a>
</div>
</li>
<li>
<div class="clearfix tb-btn tb-btn-basket theme-login">
<a id="LikBasket" title="加入购物车" href="shopCart.html"><i></i>加入购物车</a>
</div>
</li>
</div>
</div>
<div class="clear"></div>
</div>
<!--优惠套装-->
<div class="match">
<div class="match-title">优惠套装</div>
<div class="match-comment">
<ul class="like_list">
<li>
<div class="s_picBox">
<a class="s_pic" href="#"><img src="images/taozhuang01.jpg"></a>
</div>
<a class="txt" target="_blank" href="#">防爆玻璃钢化膜</a>
<div class="info-box"><span class="info-box-price">¥ 29.90</span> <span class="info-original-price">￥ 199.00</span>
</div>
</li>
<li class="plus_icon"><i>+</i></li>
<li>
<div class="s_picBox">
<a class="s_pic" href="#"><img src="images/taozhuang02.jpg"></a>
</div>
<a class="txt" target="_blank" href="#"> usb快速充电线</a>
<div class="info-box"><span class="info-box-price">¥ 8.90</span> <span class="info-original-price">￥ 299.00</span>
</div>
</li>
<li class="plus_icon"><i>=</i></li>
<li class="total_price">
<p class="combo_price"><span class="c-title">套餐价:</span><span>￥35.00</span></p>
<p class="save_all">共省:<span>￥463.00</span></p> <a href="#" class="buy_now">立即购买</a></li>
<li class="plus_icon"><i class="mr-icon-angle-right"></i></li>
</ul>
</div>
</div>
<div class="clear"></div>
<!-- introduce-->
<div class="introduce">
<div class="browse">
<div class="mc">
<ul>
<div class="mt">
<h2>看了又看</h2>
</div>
<li class="first">
<div class="p-img">
<a href="#"> <img class="" src="images/shopcartImg.jpg"> </a>
</div>
<div class="p-name"><a href="#">
华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待
</a>
</div>
<div class="p-price"><strong>￥399.00</strong></div>
</li>
<li class="first">
<div class="p-img">
<a href="#"> <img class="" src="images/shopcartImg.jpg"> </a>
</div>
<div class="p-name"><a href="#">
华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待
</a>
</div>
<div class="p-price"><strong>￥399.00</strong></div>
</li>
<li class="first">
<div class="p-img">
<a href="#"> <img class="" src="images/shopcartImg.jpg"> </a>
</div>
<div class="p-name"><a href="#">
华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待
</a>
</div>
<div class="p-price"><strong>￥399.00</strong></div>
</li>
<li class="first">
<div class="p-img">
<a href="#"> <img class="" src="images/shopcartImg.jpg"> </a>
</div>
<div class="p-name"><a href="#">
华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待
</a>
</div>
<div class="p-price"><strong>￥399.00</strong></div>
</li>
<li class="first">
<div class="p-img">
<a href="#"> <img class="" src="images/shopcartImg.jpg"> </a>
</div>
<div class="p-name"><a href="#">
华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待
</a>
</div>
<div class="p-price"><strong>￥399.00</strong></div>
</li>
</ul>
</div>
</div>
<div class="introduceMain">
<div class="mr-tabs" data-mr-tabs>
<ul class="mr-avg-sm-3 mr-tabs-nav mr-nav mr-nav-tabs">
<li id="infoTitle" class="mr-active" >
<a href="javascript:void(0);" onclick="goToInfo();">
<span class="index-needs-dt-txt">宝贝详情</span></a>
</li>
<li id="commentTitle">
<a href="javascript:void(0);" onclick="goToComment();">
<span class="index-needs-dt-txt">全部评价</span></a>
</li>
<li id="youLikeTitle">
<a href="javascript:void(0);" onclick="goToYoulike();">
<span class="index-needs-dt-txt">猜你喜欢</span></a>
</li>
</ul>
<div class="mr-tabs-bd">
<div id="info" class="mr-tab-panel mr-fade mr-in mr-active">
<div class="J_Brand">
<div class="attr-list-hd tm-clear">
<h4>产品参数：</h4></div>
<div class="clear"></div>
<ul id="J_AttrUL">
<li title="">商品名称: 华为荣耀7(PLK-AL10)</li>
<li title="">商品编号: 1684485</li>
<li title="">商品毛重: 157.00g</li>
<li title="">商品产地: 中国大陆</li>
<li title="">系统: 安卓（Android）</li>
<li title="">运行内存: 3GB</li>
<li title="">像素: 1600万以上</li>
<li title="">电池容量： 3000mAh-3999mAh</li>
<li title="">机身颜色： 金色 </li>
</ul>
<div class="clear"></div>
</div>
<div class="details">
<div class="attr-list-hd after-market-hd">
<h4>商品细节</h4>
</div>
<div class="twlistNews">
<img src="images/tw1.jpg" />
<img src="images/tw2.jpg" />
<img src="images/tw3.jpg" />
<img src="images/tw4.jpg" />
<img src="images/tw5.jpg" />
</div>
</div>
<div class="clear"></div>
</div>
<div id="comment" class="mr-tab-panel mr-fade ">
<div class="actor-new">
<div class="rate">
<strong>100<span>%</span></strong><br> <span>好评度</span>
</div>
<dl>
<dt>买家印象</dt>
<dd class="p-bfc">
<q class="comm-tags"><span>性价比高</span><em>(2177)</em></q>
<q class="comm-tags"><span>系统流畅</span><em>(1860)</em></q>
<q class="comm-tags"><span>外观漂亮(</span><em>(1823)</em></q>
<q class="comm-tags"><span>功能齐全</span><em>(1689)</em></q>
<q class="comm-tags"><span>支持国产机</span><em>(1488)</em></q>
<q class="comm-tags"><span>反应快</span><em>(1392)</em></q>
<q class="comm-tags"><span>照相不错</span><em>(1119)</em></q>
<q class="comm-tags"><span>通话质量好</span><em>(865)</em></q>
<q class="comm-tags"><span>国民手机</span><em>(831)</em></q>
</dd>
</dl>
</div>
<div class="clear"></div>
<div class="tb-r-filter-bar">
<ul class=" tb-taglist mr-avg-sm-4">
<li class="tb-taglist-li tb-taglist-li-current">
<div class="comment-info">
<span>全部评价</span>
<span class="tb-tbcr-num">(32)</span>
</div>
</li>
<li class="tb-taglist-li tb-taglist-li-1">
<div class="comment-info">
<span>好评</span>
<span class="tb-tbcr-num">(32)</span>
</div>
</li>
<li class="tb-taglist-li tb-taglist-li-0">
<div class="comment-info">
<span>中评</span>
<span class="tb-tbcr-num">(32)</span>
</div>
</li>
<li class="tb-taglist-li tb-taglist-li--1">
<div class="comment-info">
<span>差评</span>
<span class="tb-tbcr-num">(32)</span>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
<ul class="mr-comments-list mr-comments-list-flip">
<li class="mr-comment">
<!-- 评论容器 -->
<a href="">
<img class="mr-comment-avatar" src="images/hwbn40x40.jpg" />
<!-- 评论者头像 -->
</a>
<div class="mr-comment-main">
<!-- 评论内容容器 -->
<header class="mr-comment-hd">
<!--<h3 class="mr-comment-title">评论标题</h3>-->
<div class="mr-comment-meta">
<!-- 评论元数据 -->
<a href="#link-to-user" class="mr-comment-author">b***1 (匿名)</a>
<!-- 评论者 -->
评论于
<time datetime="">2017年11月02日 17:46</time>
</div>
</header>
<div class="mr-comment-bd">
<div class="tb-rev-item " data-id="255776406962">
<div class="J_TbcRate_ReviewContent tb-tbcr-content ">
帮朋友买的，没拆开来看，据说还不错，很满意！
</div>
<div class="tb-r-act-bar">
颜色分类：金 电信4G
</div>
</div>
</div>
<!-- 评论内容 -->
</div>
</li>
<li class="mr-comment">
<!-- 评论容器 -->
<a href="">
<img class="mr-comment-avatar" src="images/hwbn40x40.jpg" />
<!-- 评论者头像 -->
</a>
<div class="mr-comment-main">
<!-- 评论内容容器 -->
<header class="mr-comment-hd">
<!--<h3 class="mr-comment-title">评论标题</h3>-->
<div class="mr-comment-meta">
<!-- 评论元数据 -->
<a href="#link-to-user" class="mr-comment-author">sdflj(匿名)</a>
<!-- 评论者 -->
评论于
<time datetime="">2017年10月22日 18:50</time>
</div>
</header>
<div class="mr-comment-bd">
<div class="tb-rev-item " data-id="255776406962">
<div class="J_TbcRate_ReviewContent tb-tbcr-content ">
还不错！
</div>
</div>
</div>
<!-- 评论内容 -->
</div>
</li>
<li class="mr-comment">
<!-- 评论容器 -->
<a href="">
<img class="mr-comment-avatar" src="images/hwbn40x40.jpg" />
<!-- 评论者头像 -->
</a>
<div class="mr-comment-main">
<!-- 评论内容容器 -->
<header class="mr-comment-hd">
<!--<h3 class="mr-comment-title">评论标题</h3>-->
<div class="mr-comment-meta">
<!-- 评论元数据 -->
<a href="#link-to-user" class="mr-comment-author">swerin(匿名)</a>
<!-- 评论者 -->
评论于
<time datetime="">2015年08月02日 08:20</time>
</div>
</header>
<div class="mr-comment-bd">
<div class="tb-rev-item " data-id="255776406962">
<div class="J_TbcRate_ReviewContent tb-tbcr-content ">
赞一个！
</div>
</div>
</div>
<!-- 评论内容 -->
</div>
</li>
<li class="mr-comment">
<!-- 评论容器 -->
<a href="">
<img class="mr-comment-avatar" src="images/hwbn40x40.jpg" />
<!-- 评论者头像 -->
</a>
<div class="mr-comment-main">
<!-- 评论内容容器 -->
<header class="mr-comment-hd">
<!--<h3 class="mr-comment-title">评论标题</h3>-->
<div class="mr-comment-meta">
<!-- 评论元数据 -->
<a href="#link-to-user" class="mr-comment-author">rainbow(匿名)</a>
<!-- 评论者 -->
评论于
<time datetime="">2015年06月12日 18:75</time>
</div>
</header>
<div class="mr-comment-bd">
<div class="tb-rev-item " data-id="255776406962">
<div class="J_TbcRate_ReviewContent tb-tbcr-content ">
品质真不错！
</div>
</div>
</div>
<!-- 评论内容 -->
</div>
</li>
<li class="mr-comment">
<!-- 评论容器 -->
<a href="">
<img class="mr-comment-avatar" src="images/hwbn40x40.jpg" />
<!-- 评论者头像 -->
</a>
<div class="mr-comment-main">
<!-- 评论内容容器 -->
<header class="mr-comment-hd">
<!--<h3 class="mr-comment-title">评论标题</h3>-->
<div class="mr-comment-meta">
<!-- 评论元数据 -->
<a href="#link-to-user" class="mr-comment-author">b***1 (匿名)</a>
<!-- 评论者 -->
评论于
<time datetime="">2015年11月02日 17:46</time>
</div>
</header>
<div class="mr-comment-bd">
<div class="tb-rev-item " data-id="255776406962">
<div class="J_TbcRate_ReviewContent tb-tbcr-content ">
帮朋友买的，没拆开来看，据说还不错，很满意！
</div>
<div class="tb-r-act-bar">
颜色分类：金 电信4G
</div>
</div>
</div>
<!-- 评论内容 -->
</div>
</li>
<li class="mr-comment">
<!-- 评论容器 -->
<a href="">
<img class="mr-comment-avatar" src="images/hwbn40x40.jpg" />
<!-- 评论者头像 -->
</a>
<div class="mr-comment-main">
<!-- 评论内容容器 -->
<header class="mr-comment-hd">
<!--<h3 class="mr-comment-title">评论标题</h3>-->
<div class="mr-comment-meta">
<!-- 评论元数据 -->
<a href="#link-to-user" class="mr-comment-author">b***1 (匿名)</a>
<!-- 评论者 -->
评论于
<time datetime="">2015年11月02日 17:46</time>
</div>
</header>
<div class="mr-comment-bd">
<div class="tb-rev-item " data-id="255776406962">
<div class="J_TbcRate_ReviewContent tb-tbcr-content ">
帮朋友买的，没拆开来看，据说还不错，很满意！
</div>
<div class="tb-r-act-bar">
颜色分类：金 电信4G
</div>
</div>
</div>
<!-- 评论内容 -->
</div>
</li>
<li class="mr-comment">
<!-- 评论容器 -->
<a href="">
<img class="mr-comment-avatar" src="images/hwbn40x40.jpg" />
<!-- 评论者头像 -->
</a>
<div class="mr-comment-main">
<!-- 评论内容容器 -->
<header class="mr-comment-hd">
<!--<h3 class="mr-comment-title">评论标题</h3>-->
<div class="mr-comment-meta">
<!-- 评论元数据 -->
<a href="#link-to-user" class="mr-comment-author">b***1 (匿名)</a>
<!-- 评论者 -->
评论于
<time datetime="">2015年11月02日 17:46</time>
</div>
</header>
<div class="mr-comment-bd">
<div class="tb-rev-item " data-id="255776406962">
<div class="J_TbcRate_ReviewContent tb-tbcr-content ">
帮朋友买的，没拆开来看，据说还不错，很满意！
</div>
<div class="tb-r-act-bar">
颜色分类：金 电信4G
</div>
</div>
</div>
<!-- 评论内容 -->
</div>
</li>
<li class="mr-comment">
<!-- 评论容器 -->
<a href="">
<img class="mr-comment-avatar" src="images/hwbn40x40.jpg" />
<!-- 评论者头像 -->
</a>
<div class="mr-comment-main">
<!-- 评论内容容器 -->
<header class="mr-comment-hd">
<!--<h3 class="mr-comment-title">评论标题</h3>-->
<div class="mr-comment-meta">
<!-- 评论元数据 -->
<a href="#link-to-user" class="mr-comment-author">b***1 (匿名)</a>
<!-- 评论者 -->
评论于
<time datetime="">2015年11月02日 17:46</time>
</div>
</header>
<div class="mr-comment-bd">
<div class="tb-rev-item " data-id="255776406962">
<div class="J_TbcRate_ReviewContent tb-tbcr-content ">
帮朋友买的，没拆开来看，据说还不错，很满意！
</div>
<div class="tb-r-act-bar">
颜色分类：金 电信4G
</div>
</div>
</div>
<!-- 评论内容 -->
</div>
</li>
<li class="mr-comment">
<!-- 评论容器 -->
<a href="">
<img class="mr-comment-avatar" src="images/hwbn40x40.jpg" />
<!-- 评论者头像 -->
</a>
<div class="mr-comment-main">
<!-- 评论内容容器 -->
<header class="mr-comment-hd">
<!--<h3 class="mr-comment-title">评论标题</h3>-->
<div class="mr-comment-meta">
<!-- 评论元数据 -->
<a href="#link-to-user" class="mr-comment-author">b***1 (匿名)</a>
<!-- 评论者 -->
评论于
<time datetime="">2015年11月02日 17:46</time>
</div>
</header>
<div class="mr-comment-bd">
<div class="tb-rev-item " data-id="255776406962">
<div class="J_TbcRate_ReviewContent tb-tbcr-content ">
帮朋友买的，没拆开来看，据说还不错，很满意！
</div>
<div class="tb-r-act-bar">
颜色分类：金 电信4G
</div>
</div>
</div>
<!-- 评论内容 -->
</div>
</li>
<li class="mr-comment">
<!-- 评论容器 -->
<a href="">
<img class="mr-comment-avatar" src="images/hwbn40x40.jpg" />
<!-- 评论者头像 -->
</a>
<div class="mr-comment-main">
<!-- 评论内容容器 -->
<header class="mr-comment-hd">
<!--<h3 class="mr-comment-title">评论标题</h3>-->
<div class="mr-comment-meta">
<!-- 评论元数据 -->
<a href="#link-to-user" class="mr-comment-author">b***1 (匿名)</a>
<!-- 评论者 -->
评论于
<time datetime="">2015年11月02日 17:46</time>
</div>
</header>
<div class="mr-comment-bd">
<div class="tb-rev-item " data-id="255776406962">
<div class="J_TbcRate_ReviewContent tb-tbcr-content ">
帮朋友买的，没拆开来看，据说还不错，很满意！
</div>
<div class="tb-r-act-bar">
颜色分类：金 电信4G
</div>
</div>
</div>
<!-- 评论内容 -->
</div>
</li>
<li class="mr-comment">
<!-- 评论容器 -->
<a href="">
<img class="mr-comment-avatar" src="images/hwbn40x40.jpg" />
<!-- 评论者头像 -->
</a>
<div class="mr-comment-main">
<!-- 评论内容容器 -->
<header class="mr-comment-hd">
<!--<h3 class="mr-comment-title">评论标题</h3>-->
<div class="mr-comment-meta">
<!-- 评论元数据 -->
<a href="#link-to-user" class="mr-comment-author">b***1 (匿名)</a>
<!-- 评论者 -->
评论于
<time datetime="">2015年11月02日 17:46</time>
</div>
</header>
<div class="mr-comment-bd">
<div class="tb-rev-item " data-id="255776406962">
<div class="J_TbcRate_ReviewContent tb-tbcr-content ">
帮朋友买的，没拆开来看，据说还不错，很满意！
</div>
<div class="tb-r-act-bar">
颜色分类：金 电信4G
</div>
</div>
</div>
<!-- 评论内容 -->
</div>
</li>
</ul>
<div class="clear"></div>
<!--分页 -->
<ul class="mr-pagination mr-pagination-right">
<li class="mr-disabled"><a href="#">«</a></li>
<li class="mr-active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">»</a></li>
</ul>
<div class="clear"></div>
<div class="tb-reviewsft">
<div class="tb-rate-alert type-attention">购买前请查看该商品的 <a href="#" target="_blank">购物保障</a>，明确您的售后保障权益。</div>
</div>
</div>
<div id="youLike" class="mr-tab-panel mr-fade ">
<div class="like">
<ul class="mr-avg-sm-2 mr-avg-md-3 mr-avg-lg-4 boxes">
<li>
<div class="i-pic limit">
<img src="images/shopcartImg.jpg" />
<p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
<p class="price fl">
<b>¥</b>
<strong>498.00</strong>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="images/shopcartImg.jpg" />
<p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
<p class="price fl">
<b>¥</b>
<strong>498.00</strong>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="images/shopcartImg.jpg" />
<p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
<p class="price fl">
<b>¥</b>
<strong>498.00</strong>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="images/shopcartImg.jpg" />
<p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
<p class="price fl">
<b>¥</b>
<strong>498.00</strong>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="images/shopcartImg.jpg" />
<p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
<p class="price fl">
<b>¥</b>
<strong>498.00</strong>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="images/shopcartImg.jpg" />
<p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
<p class="price fl">
<b>¥</b>
<strong>498.00</strong>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="images/shopcartImg.jpg" />
<p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
<p class="price fl">
<b>¥</b>
<strong>498.00</strong>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="images/shopcartImg.jpg" />
<p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
<p class="price fl">
<b>¥</b>
<strong>498.00</strong>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="images/shopcartImg.jpg" />
<p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
<p class="price fl">
<b>¥</b>
<strong>498.00</strong>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="images/shopcartImg.jpg" />
<p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
<p class="price fl">
<b>¥</b>
<strong>498.00</strong>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="images/shopcartImg.jpg" />
<p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
<p class="price fl">
<b>¥</b>
<strong>498.00</strong>
</p>
</div>
</li>
<li>
<div class="i-pic limit">
<img src="images/shopcartImg.jpg" />
<p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
<p class="price fl">
<b>¥</b>
<strong>498.00</strong>
</p>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
<!--分页 -->
<ul class="mr-pagination mr-pagination-right">
<li class="mr-disabled"><a href="#">«</a></li>
<li class="mr-active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">»</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="footer ">
<div class="footer-hd ">
<p> <a href="http://www.mingrisoft.com/" target="_blank">明日科技</a> <b>|</b> <a href="index.html">商城首页</a> <b>|</b> <a href="#">支付宝</a> <b>|</b> <a href="#">物流</a> </p>
</div>
<div class="footer-bd ">
<p> <a href="http://www.mingrisoft.com/Index/ServiceCenter/aboutus.html" target="_blank">关于明日</a> <a href="#">合作伙伴</a> <a href="#">联系我们</a> <a href="#">网站地图</a> <em>© 2016-2025 mingrisoft.com 版权所有</em> </p>
</div>
</div>
</div>
</div>
</div>
<!--菜单 -->
<div class="tip">
<div id="sidebar">
<div id="wrap">
<div id="prof" class="item">
<a href="#"> <span class="setting"></span> </a>
<div class="ibar_login_box status_login show">
<div class="avatar_box">
<p class="avatar_imgbox"><img src="images/no-img_mid_.jpg" /></p>
<ul class="user_info">
<li>用户名：mingriSoft</li>
<li>级 别：金牌会员</li>
</ul>
</div>
<div class="login_btnbox">
<a href="#" class="login_order">我的订单</a>
<a href="#" class="login_favorite">我的收藏</a>
</div>
<i class="icon_arrow_white"></i>
</div>
</div>
<div id="shopCart" class="item">
<a href="#"> <span class="message"></span> </a>
<p> 购物车 </p>
<p class="cart_num">0</p>
</div>
<div id="asset" class="item">
<a href="#"> <span class="view"></span> </a>
<div class="mp_tooltip show">
我的资产
<i class="icon_arrow_right_black"></i>
</div>
</div>
<div id="foot" class="item">
<a href="#"> <span class="zuji"></span> </a>
<div class="mp_tooltip show">
我的足迹
<i class="icon_arrow_right_black"></i>
</div>
</div>
<div id="brand" class="item">
<a href="#"> <span class="wdsc"><img src="images/wdsc.png" /></span> </a>
<div class="mp_tooltip show">
我的收藏
<i class="icon_arrow_right_black"></i>
</div>
</div>
<div id="broadcast" class="item">
<a href="#"> <span class="chongzhi"><img src="images/chongzhi.png" /></span> </a>
<div class="mp_tooltip show">
我要充值
<i class="icon_arrow_right_black"></i>
</div>
</div>
<div class="quick_toggle">
<li class="qtitem" id="kehu"> <a href="#"><span class="kfzx"></span></a>
<div class="mp_tooltip show">
客服中心
<i class="icon_arrow_right_black"></i>
</div> </li>
<!--二维码 -->
<li class="qtitem"> <a href="#none"><span class="mpbtn_qrcode"></span></a>
<div class="mp_qrcode" style="display:none;">
<img src="../images/weixin_code_145.png" />
<i class="icon_arrow_white"></i>
</div> </li>
<li class="qtitem"> <a href="#top" class="return_top"><span class="top"></span></a> </li>
</div>
<!--回到顶部 -->
<div id="quick_links_pop" class="quick_links_pop hide"></div>
</div>
</div>
<div id="prof-content" class="nav-content">
<div class="nav-con-close">
<i class="mr-icon-angle-right mr-icon-fw"></i>
</div>
<div>
我
</div>
</div>
<div id="shopCart-content" class="nav-content">
<div class="nav-con-close">
<i class="mr-icon-angle-right mr-icon-fw"></i>
</div>
<div>
购物车
</div>
</div>
<div id="asset-content" class="nav-content">
<div class="nav-con-close">
<i class="mr-icon-angle-right mr-icon-fw"></i>
</div>
<div>
资产
</div>
<div class="ia-head-list">
<a href="#" target="_blank" class="pl">
<div class="num">
0
</div>
<div class="text">
优惠券
</div> </a>
<a href="#" target="_blank" class="pl">
<div class="num">
0
</div>
<div class="text">
红包
</div> </a>
<a href="#" target="_blank" class="pl money">
<div class="num">
￥0
</div>
<div class="text">
余额
</div> </a>
</div>
</div>
<div id="foot-content" class="nav-content">
<div class="nav-con-close">
<i class="mr-icon-angle-right mr-icon-fw"></i>
</div>
<div>
足迹
</div>
</div>
<div id="brand-content" class="nav-content">
<div class="nav-con-close">
<i class="mr-icon-angle-right mr-icon-fw"></i>
</div>
<div>
收藏
</div>
</div>
<div id="broadcast-content" class="nav-content">
<div class="nav-con-close">
<i class="mr-icon-angle-right mr-icon-fw"></i>
</div>
<div>
充值
</div>
</div>
</div>
<script>
function goToInfo(){
var info=document.getElementById("info");
var comment=document.getElementById("comment");
var youLike=document.getElementById("youLike");
var infoTitle=document.getElementById("infoTitle");
var commentTitle=document.getElementById("commentTitle");
var youLikeTitle=document.getElementById("youLikeTitle");
infoTitle.className="mr-active";
commentTitle.className="";
youLikeTitle.className="";
info.className="mr-tab-panel mr-fade mr-in mr-active";
comment.className="mr-tab-panel mr-fade ";
youLike.className="mr-tab-panel mr-fade ";
}
function goToComment(){
var info=document.getElementById("info");
var comment=document.getElementById("comment");
var youLike=document.getElementById("youLike");
var infoTitle=document.getElementById("infoTitle");
var commentTitle=document.getElementById("commentTitle");
var youLikeTitle=document.getElementById("youLikeTitle");
infoTitle.className="";
commentTitle.className="mr-active";
youLikeTitle.className="";
info.className="mr-tab-panel mr-fade ";
comment.className="mr-tab-panel mr-fade mr-in mr-active";
youLike.className="mr-tab-panel mr-fade ";
}
//显示猜你喜欢内容区域
function goToYoulike(){
var info=document.getElementById("info");
var comment=document.getElementById("comment");
var youLike=document.getElementById("youLike");
var infoTitle=document.getElementById("infoTitle");
var commentTitle=document.getElementById("commentTitle");
var youLikeTitle=document.getElementById("youLikeTitle");
infoTitle.className="";
commentTitle.className="";
youLikeTitle.className="mr-active";
info.className="mr-tab-panel mr-fade ";
comment.className="mr-tab-panel mr-fade ";
youLike.className="mr-tab-panel mr-fade mr-in mr-active";
}
</script>
</body>
</html>css代码：
@charset "utf-8";
/* CSS Document */
dt + dd {
margin:0px 0px;padding:0px 0px;
}
.mr-selected-text{font-size:14px ;}
ul,li,ol{ list-style:none;}
dl,dd{ margin:auto;}
img{ border:none;}
button {
padding: 1px 6px;
}
li{ list-style:none;}
a img,:link img,:visited img { border: none; }
table { border-collapse: collapse; border-spacing: 0; font-size: 14px;}
:focus { outline: none; }
*{margin:0;padding:0;}
fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
.mr-nav > li > a{padding:0px 0px;font-size: 12px;}
.mr-nav-tabs > li > a { margin-right:0px;}
.mr-nav-tabs > li{border-top: 2px solid transparent;border-bottom:2px solid transparent ;}
/*导航固定*/
ul.mr-tabs-nav.mr-nav.mr-nav-tabs {width:100%;background:#fff;}
/*tab*/
.tab{ line-height:56px; font-size:12px;}
.tab a{ color:#07c;}
.tab a:hover{ color:#c00;}
.tab a.cur{ font-weight:bold;}
/*商品详细页*/
/*iteminfo*/
.clearfixRight{font-size:12px;}
/*价格*/
.tb-detail-price{text-align: center;}
.tb-detail-price .price em{font-family: arial;}
.iteminfo_mktprice .sys_item_mktprice{text-decoration:line-through;padding-top:7px ;padding-bottom: 0px;}
.iteminfo_price{ color:#c00;}
.sys_item_price{ color:#c00; font-size:20px;}
.tb-detail-price dd{display: inline-block;}
.iteminfo_parameter a:hover{text-decoration: none;color:initial ;}
.iteminfo_parameter dt,.tb-detail-price dt,.shopPromotion.gold dt{display:inline; width:60px; white-space:nowrap; text-align:right; color:#888;}
.tb-detail-price li{display: inline-block;margin:0px 5px ;}
/*优惠活动*/
.shopPromotion.gold{padding-left: 10px;}
.shopPromotion.gold dt{float: left;margin-top:10px;width: auto;}
.shopPromotion.gold .gold-list{margin-left:60px;overflow: hidden;}
.shopPromotion.gold .gold-list p{margin-top:10px ;padding-left:8px ;color: #B5621B;font-size:14px;}
.shopPromotion.gold .gold-list span{display: none;}
.shopPromotion.gold .gold-list li{float:left;padding:5px 10px;border-radius:5px;background:#C40000 ;color: #fff;margin:5px 5px ;}
/*销量*/
.tm-ind-panel {padding: 10px 0px;position: relative;overflow: hidden;clear: both;display: flex;}
.tm-ind-item {float: left;width: 33%;text-align: center;position: relative;left: -1px;border-left: 1px solid #E5DFDA;
flex: 1 1 0%;line-height: 16px;cursor: pointer;}
.tm-ind-panel .tm-count {display: inline-block;line-height: 16px;height: 16px;color: #C40000;font-weight: 700;margin-left: 3px;}
/*地址*/
.address{margin-right:80px ;}
.mr-selected {width:32%;max-width: 200px;float: left;margin-right:1%;}
.address .mr-btn {font-size:12px ;}
.address select {float: left;width: 32%;margin-right: 1%;}
.pay-logis{padding-top:5px ;text-align: right;padding-right:10px ;}
/*规格*/
.theme-signin .btn-op.act{display: none;}
.theme-signin .btn-op.act .btn{width:50%;float: left;}
.theme-login .cart-title{border: 1px solid #F5F5F5;width:100%;padding:10px ;}
.theme-login .cart-title span{float: right;}
/*数量*/
.iteminfo_parameter.munber,.iteminfo_parameter.freight{display:none ;}
.iteminfo_parameter.munber dd{margin-left:5px ;}
#min,#add{width:20px;}
/*购物车*/
.tb-btn a {margin-right: 0px;float: left;overflow: hidden; position: relative;width:100%; height: 30px; line-height: 30px;background-color: #FFEDED;
color:#F03726;font-size: 14px;text-align: center;}
.tb-btn-basket a {background-color:#F03726;color: #FFF;}
.pay li,.pay .pay-opt{float:left; margin-top:15px;width:33.33% ;height:30px ;}
.pay span{display:inline-block;width: 50%;float: left;font-size:14px ;background:#fff ;line-height:30px ;cursor: pointer;}
.tb-detail-hd h1 {padding-bottom:0.4em; line-height: 1;font-size: 14px;font-weight: 700;color: #000;}
.tb-detail-hd {padding: 8px 0;text-align: center;}
li.mr-active hr{border-top: 1px solid #f00;}
/*搭配*/
.match-title{height: 36px;line-height: 36px;font-size: 16px;margin: 0px 10px;border-bottom: 1px solid #E6E6E6;color:#E4393C;font-weight: 700;}
.like_list{overflow: hidden;}
.like_list li{float: left;margin-left: 5px;margin-right: 5px;padding-bottom: 15px;text-align: center;}
.s_picBox {width:100px;overflow: hidden;display: block;}
.s_picBox img{width:100% ;}
.info-box-price { color: #E4393C;font-size: 16px;font-family: arial;font-weight: 600;}
.info-original-price {display:none;text-decoration: line-through;font-size: 12px;color: #999;margin-left: 5px;font-family: arial;font-weight: 400;}
.like_list .plus_icon {width: 10px;text-align: center;font-size: 20px;color: #C3C3C3;height:100px ;line-height:100px;margin:0px 0px;}
.like_list .total_price p {font-size: 12px;padding-bottom: 8px;}
.like_list .total_price .combo_price span {font-size: 16px;color: #E4393C;font-weight: 600;}
.like_list .total_price {margin-top:35px;}
.like_list .total_price .buy_now {background-color: #F03726; color: #FFF;margin:0px auto;text-align: center;margin-top: 4px;
width: 62px;line-height:24px;font-size: 12px;display: block;}
.c-title{display: none;}
.like_list .plus_icon i.mr-icon-angle-right{position: absolute;right:10px;font-weight:600 ;}
.match-comment{border-bottom: 1px solid #E6E6E6;}
/*介绍*/
.introduce{width:100%;margin: 0px auto;text-align: center;padding-bottom: 110px;max-width:1200px ;}
.introduceMain{width:100%;background:#fff ;}
.browse{display: none;}
/*产品参数*/
.J_BrandAttr.name {color: #666;padding: 8px 20px 10px;height: 40px;line-height: 40px;text-align:left;}
.attr-list-hd ,.after-market-hd{height: 35px; padding-top:20px;}
.attr-list-hd h4 {position: relative;float: left;height: 35px;margin-bottom: -1px;padding-right: 10px;border-bottom: 1px solid #F70;font-size: 14px;}
ul#J_AttrUL{padding: 0px 20px 18px;text-indent: 0px;overflow: hidden;}
ul#J_AttrUL li {float: left;width: 100%;height: 18px;overflow: hidden;margin: 10px 0px 0px 0px;line-height: 18px;vertical-align: top;white-space: nowrap; text-overflow: ellipsis;color: #666;font-size:14px;}
/*图片*/
.twlistNews img,.sh .return-process img{width:100%;}
.twlistNews{padding-top: 40px;}
/*评价*/
.tb-tbcr-content {color: #3F3F3F;font-size: 14px;}
.tb-tbc-rate .tb-r-act-bar {margin-top: 10px;float: left;font-size:10px ;color: #B0B0B0;}
.tb-r-filter-bar li{ float:left;text-align:center;width:25%;}
.tb-taglist-li .comment-info{}
.mr-pagination li{ float:none;}
li.mr-comment{ width:100%}
.mr-comments-list-flip .mr-comment-main {margin-right: 0px;}
/*印象*/
.actor-new{position: relative;margin-top:10px ;}
.rate {display: none;}
.actor-new dt{height: 36px;line-height: 36px;font-size: 16px;margin: 0px 10px;color: #E4393C;font-weight: 700;text-align: left;}
.actor-new .comm-tags {float: left;height: 21px;line-height: 21px;padding: 0 7px;margin-right: 5px;background:#f47602;margin-bottom: 10px;color:#fff ;}
.p-bfc{overflow: hidden;max-height:62px ;padding:0px 20px 0px 10px;}
.actor-new i {position: absolute;right:10px;top:36px;font-size:18px ;color:#C3C3C3 ;}
/*须知*/
.tb-rate-alert {border: 1px solid #EEE;padding: 4px 8px;position: relative;background-color: #FFE;border-color: #FC7;font: 16px/1.5 tahoma,arial,"Hiragino Sans GB",宋体,sans-serif}
.mr-breadcrumb-slash{max-width:1000px ;margin:10px auto ;}
/*推荐商品*/
.like{margin-top:25px;border-radius:4px;}
.like li{ float:left; padding:8px 10px 0;font: 14px/1.5 tahoma,arial,"Hiragino Sans GB",宋体,sans-serif;}
.like li{ text-align:left;}
.like li .p-price strong {
font-size: 14px; color: #E4393C;font-weight: 400;font-family: Verdana;}
.like li img{width:100%}
.footer { margin:0px auto; margin-top:20px;}
.hwsize tr th{ text-align:center;}
/*改写的样式*/
.clearfixLeft{display:none;}
.scoll img{width:100%; margin-left:0}
.mr-comment-main,#J_AttrUL{ text-align:left;}
.tb-r-filter-bar{ margin-top:20px;}
.pay{ position:fixed; bottom:0px;right:0px; z-index:10000;width:100% ;background:#fff ;}
.nav.white,.tip{z-index:999}
@media only screen and (min-width:640px)
{
.listMain{padding-top: 10px;}
/*导航固定*/
ul.mr-tabs-nav.mr-nav.mr-nav-tabs {right:0px ;left: 10px;width: auto;}
.scoll{float: left;width:45%;max-width:360px;padding-right:10px ;}
.clearfixRight{float:left;width:55%;min-height: 350px;}
.scoll{padding-right:10px ;}
.iteminfo_parameter.freight{display: block;margin-top: 10px;margin-bottom:10px ;}
.iteminfo_parameter.freight dt{margin-left:-70px ;float: left;margin-right:10px ;padding-top:5px ;padding-bottom:20px ;}
.pay{position: static;}
ul.mr-avg-sm-4.mr-tabs-nav.mr-nav.mr-nav-tabs {width: auto;}
ul#J_AttrUL li {display: inline;float: left;width: 33.33%;}
.introduce{margin-top: 20px;}
/*可选规格*/
.theme-login .cart-title{border:none ;margin-left: -60px;position: relative;padding:10px 0px 0px 10px ;}
.theme-login .cart-title span {position: absolute;right: -50px;}
/*优惠活动*/
.shopPromotion.gold{padding-left:0px ;}
.tb-detail-list{position: relative;}
.shopPromotion.gold .gold-list span{position: absolute;right: 10px;display: inline-block;cursor:pointer ;padding:0px 10px;}
.shopPromotion.gold .coupon{display: none;padding:10px 0px;}
.shopPromotion.gold .coupon .gold-list li {border-radius:0;background:url(../images/couponli.png) no-repeat ;padding: 10px 10px;}
.shopPromotion.gold .coupon dt{margin-top:16px ;}
/*销量*/
.tm-ind-panel {border: dotted #C9C9C9; border-width:1px 0px;margin: -1px 0px 0px 0px;padding: 10px 0px;
position: relative;overflow: hidden;clear: both;display: flex;}
.tm-ind-item {float: left;width: 33%;text-align: center;position: relative;left: -1px;border-left: 1px solid #E5DFDA;
flex: 1 1 0%;line-height: 16px;cursor: pointer;}
.tm-ind-panel .tm-count {display: inline-block;line-height: 16px;height: 16px;color: #C40000;font-weight: 700;margin-left: 3px;}
/*搭配*/
.s_picBox {width:150px;}
.like_list .plus_icon {height:150px ;line-height:150px;}
.info-original-price ,.c-title{display: inline;}
.like_list .total_price .buy_now {width:102px;line-height: 32px;font-size: 14px;}
.like_list .plus_icon i.mr-icon-angle-right{display: none;}
.theme-signin-left{float:none;padding-bottom:0;margin:0 ;}
.iteminfo_mktprice {padding-top: 10px;}
.iteminfo_parameter {padding-left: 50px;}
.tb-detail-hd,.tb-detail-price{text-align: left;}
.tb-detail-price li {margin-left: 0px;}
.tb-detail-hd h1 {font-size: 16px;}
.cart-title.number{margin-top:5px ;}
.match{margin:0px auto;max-width: 1000px;padding-top:20px ;background: #fff;}
/*购物车*/
.tb-btn-buy{margin-left:60px; margin-right:10px;}
.tb-btn a{width:98px ;border: 1px solid #F03726;}
.pay .pay-opt{display:none ;}
.pay li{width: auto;}
/*印象*/
.p-bfc {padding: 0px ; }
.rate {float: left;padding-top:20px ;display: block;margin-right: 30px;}
.rate strong {font: 400 46px/30px arial;color: #e4393c;}
}
@media only screen and (min-width:1025px)
{
.listMain{margin-right:40px ;}
/*放大镜*/
/* box */
.box { width:700px; margin:0px auto; }
.tb-pic a { display:table-cell; text-align:center; vertical-align:middle; }
.tb-pic a img {vertical-align:middle; }
.tb-pic.tb-s40 img{width:100%;}
.tb-pic a {*display:block;*font-family:Arial;*line-height:1;}
.tb-thumb {margin:10px 0 0; overflow:hidden; }
.tb-thumb li {background:none repeat scroll 0 0 transparent; float:left; height:62px; margin:0 6px 0 0; overflow:hidden; padding:1px; }
.tb-s310, .tb-s310 a { height:350px; width:350px; }
.tb-s310 a { *font-size:271px;}
.tb-s40 a { *font-size:35px;}
.tb-s40, .tb-s40 a { height:60px; width:60px; }
.tb-booth { border:1px solid #CDCDCD; position:relative; z-index:1; }
.tb-thumb .tb-selected { background:none repeat scroll 0 0 #C30008; height:62px;}
.tb-thumb .tb-selected div { background-color:#FFFFFF; border:medium none; }
.tb-thumb li div { border:1px solid #CDCDCD; }
div.zoomDiv { z-index:999; position:absolute; top:0px; left:0px; width:400px; height:400px; background:#ffffff; border:1px solid #CCCCCC; display:none; text-align:center; overflow:hidden; }
div.zoomMask { position:absolute; background:url(../images/mask.png)repeat scroll 0 0 transparent; cursor:move; z-index:1; }
/*价格*/
.tb-detail-hd h1 {font-size:18px;}
.tb-detail-price{background: #F7F7F7;overflow: hidden;height:100px;padding-top:40px ;}
.tb-detail-price li {display: block;margin:0px 10px;}
.tb-detail-price li dt {width: 70px;float:left;text-align: left;margin-top:2px;}
.price.iteminfo_price dt{margin-top:5px ;}
.sys_item_price{font-size: 24px;font-weight: bold;}
.sys_item_mktprice{font-size:14px ;}
.shopPromotion.gold .gold-list p{margin-top:8px;color:#E4393C;font-weight: bold;}
/*规格*/
.theme-popover {display: block;position: static;border:none ;box-shadow: none;}
.theme-poptit,.theme-signin-right,.iteminfo_parameter dt.theme-login,.btn-op{display: none;}
.theme-options{overflow: visible;padding:0px 0px;}
.theme-options ul{overflow: hidden;float: none;}
.theme-signin-left {max-width:100%;margin-bottom: 0;}
.theme-signin-left .sku-line{margin: 5px;cursor: pointer;}
.theme-signin-left .cart-title{margin-left: -46px;margin-top:10px;font-size:12px ;font-weight: 100;color:#888 ;float: left;}
/*优惠活动*/
.shopPromotion.gold{position:absolute;top:0px;padding-left:10px;background: #F7F7F7;overflow: hidden;width:100% ;}
.scoll{display: none;}
.item-inform{max-width:1000px ;margin:0px auto;background:#fff ;}
.clearfixLeft{display:block;float: left;width:360px;}
.clearfixRight{width:560px;margin-left:30px;}
.freight{width:400px;float: left;}
.theme-signin-left {max-width:500px ;}
.iteminfo_parameter.freight dt,.pay-logis{padding-top:6px ;padding-bottom:0px ;}
/*介绍*/
.introduceMain{width:80%;float:left;background:#fff ;}
.browse{display:block; float:left;width:20% ;}
.browse ul{border:1px solid #D4D4D4 ;width: 90%;}
.browse ul .mt{background-color: #f7f7f7}
.browse ul li {margin:0px 10px;padding:12px 0px;border-top: 1px dotted #DEDEDE;}
.browse ul li.first {border-top:none;}
.browse li img{width:100% ;}
.browse li .p-price strong {color: #E4393C;font-weight: 600;}
/*导航固定*/
ul.mr-tabs-nav.mr-nav.mr-nav-tabs {left:20% ;max-width:960px ;background: #F5F5F5;right: 40px;}
.mr-nav-tabs > li.mr-active {border-top: 2px solid #F03726;border-bottom: none;}
/*评论*/
.tb-r-filter-bar{border: 1px solid #F5F5F5;background-color: #FAFAFA;}
.tb-r-filter-bar li {text-align:left;width:auto ;padding:0px 10px;}
}
@media only screen and (min-width:1260px)
{
.item-inform ,.match,.introduceMain,.mr-breadcrumb-slash{max-width: 1200px;}
.clearfixLeft {margin-left: 10px;width: 400px;}
/*放大镜*/
.tb-s310, .tb-s310 a ,.tb-s310, .tb-s310 img { height:400px; width:400px;}
.clearfixRight {width: 700px;}
/*导航固定*/
ul.mr-tabs-nav.mr-nav.mr-nav-tabs {left:auto;right:auto;width:960px ;}
}
/*轮播*/
.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
display: block;
}
html[xmlns] .flexslider .slides {
display: block;
}
* html .flexslider .slides {
height: 1%;
}
.no-js .flexslider .slides > li:first-child {
display: block;
}
.flexslider {
background: #ffffff;
position: relative;
zoom: 1;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
-o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
}
.flexslider .slides {
zoom: 1;
}
.flexslider .slides img {
height: auto;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 40px;
height: 40px;
margin: -20px 0 0;
position: absolute;
top: 50%;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
}
.flex-pauseplay a {
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
left: 10px;
opacity: 0.8;
z-index: 10;
overflow: hidden;
cursor: pointer;
color: #000;
}
.flex-pauseplay a:hover {
opacity: 1;
}
.flex-control-nav {
width: 100%;
position: absolute;
bottom: 20px;
text-align: center;
}
.flex-control-nav li {
float:none;
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(0, 0, 0, 0.9);
cursor: default;
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden;
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
.flex-control-thumbs img {
width: 100%;
height: auto;
display: block;
opacity: .7;
cursor: pointer;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}三栏切换功能实现原理详解
您提供的代码实现了一个商品详情页的三栏切换功能（宝贝详情、全部评价、猜你喜欢）。这是一个典型的选项卡（Tab）切换效果。让我详细讲解其实现原理。
一、整体结构分析
HTML 结构
html
<!-- 选项卡标题栏（三个可点击的标签） --><ul class="mr-avg-sm-3 mr-tabs-nav mr-nav mr-nav-tabs"> <li id="infoTitle" class="mr-active"> <a href="javascript:void(0);" onclick="goToInfo();">宝贝详情</a> </li> <li id="commentTitle"> <a href="javascript:void(0);" onclick="goToComment();">全部评价</a> </li> <li id="youLikeTitle"> <a href="javascript:void(0);" onclick="goToYoulike();">猜你喜欢</a> </li></ul><!-- 选项卡内容区域（三个内容面板） --><div class="mr-tabs-bd"> <div id="info" class="mr-tab-panel mr-fade mr-in mr-active"> <!-- 宝贝详情内容 --> </div> <div id="comment" class="mr-tab-panel mr-fade"> <!-- 全部评价内容 --> </div> <div id="youLike" class="mr-tab-panel mr-fade"> <!-- 猜你喜欢内容 --> </div></div>
二、核心工作原理
1、显示/隐藏机制
通过 CSS 类名 控制内容面板的显示和隐藏：
| 类名组合 | 效果 |
|---|---|
mr-tab-panel mr-fade mr-in mr-active | 面板显示（有 mr-active 类） |
mr-tab-panel mr-fade | 面板隐藏（没有 mr-active 类） |
CSS 实现原理（在 basic.css 中）：
css
.mr-tab-panel {
display: none; /* 默认隐藏 */}.mr-tab-panel.mr-active {
display: block; /* 有 active 类时显示 */}2、切换流程
text
用户点击"全部评价"标签 ↓ 触发 goToComment() 函数 ↓ 步骤1：修改三个标题栏的类名 - infoTitle.className = ""（移除高亮） - commentTitle.className = "mr-active"（添加高亮） - youLikeTitle.className = ""（移除高亮） ↓ 步骤2：修改三个内容面板的类名 - info.className = "mr-tab-panel mr-fade"（隐藏） - comment.className = "mr-tab-panel mr-fade mr-in mr-active"（显示） - youLike.className = "mr-tab-panel mr-fade"（隐藏） ↓ 结果：用户看到"全部评价"的内容
三、JavaScript 函数详解
函数1：goToInfo() - 切换到宝贝详情
javascript
function goToInfo(){
// 1. 获取三个内容面板的 DOM 元素
var info = document.getElementById("info");
var comment = document.getElementById("comment");
var youLike = document.getElementById("youLike");
// 2. 获取三个标题栏的 DOM 元素
var infoTitle = document.getElementById("infoTitle");
var commentTitle = document.getElementById("commentTitle");
var youLikeTitle = document.getElementById("youLikeTitle");
// 3. 修改标题栏的类名（只有一个保持高亮）
infoTitle.className = "mr-active"; // 当前标签高亮
commentTitle.className = ""; // 其他标签不高亮
youLikeTitle.className = ""; // 其他标签不高亮
// 4. 修改内容面板的类名（只有一个显示）
info.className = "mr-tab-panel mr-fade mr-in mr-active"; // 显示
comment.className = "mr-tab-panel mr-fade "; // 隐藏
youLike.className = "mr-tab-panel mr-fade "; // 隐藏}函数2：goToComment() - 切换到全部评价
javascript
function goToComment(){
// 获取元素（同上）
var info = document.getElementById("info");
var comment = document.getElementById("comment");
var youLike = document.getElementById("youLike");
var infoTitle = document.getElementById("infoTitle");
var commentTitle = document.getElementById("commentTitle");
var youLikeTitle = document.getElementById("youLikeTitle");
// 标题栏：只有"全部评价"高亮
infoTitle.className = "";
commentTitle.className = "mr-active"; // 当前标签高亮
youLikeTitle.className = "";
// 内容面板：只显示"全部评价"的内容
info.className = "mr-tab-panel mr-fade ";
comment.className = "mr-tab-panel mr-fade mr-in mr-active"; // 显示
youLike.className = "mr-tab-panel mr-fade ";}函数3：goToYoulike() - 切换到猜你喜欢
javascript
function goToYoulike(){
// 获取元素（同上）
var info = document.getElementById("info");
var comment = document.getElementById("comment");
var youLike = document.getElementById("youLike");
var infoTitle = document.getElementById("infoTitle");
var commentTitle = document.getElementById("commentTitle");
var youLikeTitle = document.getElementById("youLikeTitle");
// 标题栏：只有"猜你喜欢"高亮
infoTitle.className = "";
commentTitle.className = "";
youLikeTitle.className = "mr-active"; // 当前标签高亮
// 内容面板：只显示"猜你喜欢"的内容
info.className = "mr-tab-panel mr-fade ";
comment.className = "mr-tab-panel mr-fade ";
youLike.className = "mr-tab-panel mr-fade mr-in mr-active"; // 显示}四、CSS 类名的作用
| 类名 | 作用 | 使用位置 |
|---|---|---|
mr-tab-panel | 基础类，默认隐藏 | 所有内容面板 |
mr-fade | 添加淡入淡出过渡效果 | 所有内容面板 |
mr-in | 配合淡入淡出动画 | 显示的面板 |
mr-active | 最终显示的面板 | 当前激活的面板 |
五、丝滑切换的秘密
1、CSS 过渡动画（淡入淡出效果）
在 basic.css 中定义了过渡效果：
css
.mr-fade {
opacity: 0;
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear;}.mr-fade.mr-in {
opacity: 1;}工作原理：
隐藏时：
opacity: 0（完全透明）显示时：
opacity: 1（完全不透明）过渡时间：0.2 秒，产生平滑的淡入淡出效果
2、CSS 位移动画（左右滑动效果）
css
.mr-tab-panel {
position: absolute;
top: 0;
width: 100%;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);}.mr-tab-panel.mr-active {
-webkit-transform: translateX(0);
transform: translateX(0);}.mr-tab-panel.mr-active ~ .mr-tab-panel {
-webkit-transform: translateX(100%);
transform: translateX(100%);}工作原理：
左侧面板：向左偏移 100%（在左边隐藏）
当前面板：偏移 0%（正常显示）
右侧面板：向右偏移 100%（在右边隐藏）
切换时产生左右滑动的视觉效果
六、完整工作流程图
text
┌─────────────────────────────────────────────────────────────┐ │ 初始状态 │ │ ┌─────────────────────────────────────────────────────────┐│ │ │ [宝贝详情] [全部评价] [猜你喜欢] ││ │ │ ↑ 高亮 ││ │ ├─────────────────────────────────────────────────────────┤│ │ │ ││ │ │ 宝贝详情的内容（显示） ││ │ │ ││ │ └─────────────────────────────────────────────────────────┘│ └─────────────────────────────────────────────────────────────┘ ↓ 用户点击"全部评价" ┌─────────────────────────────────────────────────────────────┐ │ 切换过程 │ │ 1. goToComment() 函数执行 │ │ 2. 修改标题栏类名：commentTitle.className = "mr-active" │ │ 3. 修改内容面板类名：comment.className = "... mr-active" │ │ 4. CSS 过渡动画执行（0.2-0.3秒） │ └─────────────────────────────────────────────────────────────┘ ↓ 切换完成 ┌─────────────────────────────────────────────────────────────┐ │ 最终状态 │ │ ┌─────────────────────────────────────────────────────────┐│ │ │ [宝贝详情] [全部评价] [猜你喜欢] ││ │ │ ↑ 高亮 ││ │ ├─────────────────────────────────────────────────────────┤│ │ │ ││ │ │ 全部评价的内容（显示） ││ │ │ ││ │ └─────────────────────────────────────────────────────────┘│ └─────────────────────────────────────────────────────────────┘
七、总结
| 技术点 | 实现方式 |
|---|---|
| 核心机制 | 通过修改 CSS 类名控制显示/隐藏 |
| 标题栏切换 | 修改 className 添加/移除 mr-active |
| 内容切换 | 修改 className 添加/移除 mr-active |
| 丝滑效果 | CSS transition 过渡动画 |
| 滑动效果 | CSS transform 位移变换 |
| 事件绑定 | HTML 的 onclick 属性调用 JavaScript 函数 |
一句话总结：三栏切换的核心原理是通过 JavaScript 修改标题栏和内容面板的 CSS 类名，配合 CSS 的 transition 过渡动画和 transform 位移变换，实现平滑的淡入淡出或左右滑动效果