摘要：<!-- 商品详情页 --> <!-- 详情页内部上导航 --> <div class="detail"> <div class="detailTop"> <!--上导航条居中
<!-- 商品详情页 -->
<!-- 详情页内部上导航 -->
<div class="detail">
<div class="detailTop"> <!--上导航条居中-->
<div class="detailTop_left"> <!--左浮动-->
<b>小米8</b><span></span><a href="">小米8 SE</a>
</div>
<div class="detailTop_right"> <!--右浮动-->
<a href="">概述</a>
<span></span>
<a href="">图集</a>
<span></span>
<a href="">参数</a>
<span></span>
<a href="">F码通道</a>
<span></span>
<a href="">用户评价</a>
</div>
</div>
</div> <!-- 详情页内部上导航结束 -->
<!-- 商品详情部分 -->
<div class="detailShop">
<div class="detailShop_left">
<!-- 左部产品轮播图 -->
</div>
<div class="detailShop_right">
<h1>红米6A</h1>
<p>12nm高性能处理器 / 5.45" 小巧全面屏 / 1300万高清相机 / “小杨柳腰”机身</p>
<h2>599</h2>
<div class="detailShop_map">
<i class="fa fa-map-marker"style="color:#ccc;" ></i>
<span>北京 北京市 东城区 永定门外街道 <a href="" style="color:#ff6700;">修改</a></span><br>
<span style="color:#ff6700;">有现货</span>
</div>
<!-- 版本部分 -->
<div class="detailShop_rev">
<h3>选择版本</h3>
<div class="detailShop_revLeft" style="margin-right:6px;">
4GB+64GB 全网通 <span data-val="599">599元</span>
</div>
<div class="detailShop_revLeft">
6GB+64GB 全网通 <span data-val="599">699元</span>
</div>
</div>
<div class="clear"></div>
<!-- 颜色部分 -->
<div class="detailShop_color">
<h3>选择颜色</h3>
<div class="detailShop_color_A" style="margin-right:6px;">
<span style="background:#f6e6d8"></span>金色
</div>
<div class="detailShop_color_A">
<span span style="background: #3c3f43;"></span>深灰
</div>
<div class="detailShop_color_A" style="margin-right:6px;">
<span span style="background: #d93239;"></span>深灰
</div>
<div class="detailShop_color_A">
<span style="background: #3871B7;"></span>深灰
</div>
<div class="clear"></div>
</div>
<!-- 保障部分 -->
<div class="detailShop_bz">
<h3>选择小米提供的保障服务</h3>
<a href="">了解保障服务 ></a>
<div class="clear"></div>
</div>
<!-- 保障文本框 -->
<div class="detailShop_bz1">
<i class="fa fa-check-circle detailShop_hide"></i>
<img src="images/bz.jpg" alt="">
<div class="detailShop_bz1_1">
<h3>意外保障服务</h3>
<p>手机意外摔落/进水/碾压等损坏</p>
<b class="fa fa-check-square detailShop_hide"></b> 我已阅读 <a href=""> 服务条款 </a>|<a href=""> 服务条款 </a>
<span data-val="99">99元</span>
</div>
</div>
<div class="detailShop_bz1">
<!-- class名复合写法 -->
<i class="fa fa-check-circle detailShop_hide"></i>
<img src="images/bz.jpg" alt="">
<div class="detailShop_bz1_1">
<h3>意外保障服务</h3>
<p>手机意外摔落/进水/碾压等损坏</p>
<b class="fa fa-check-square detailShop_hide"></b> 我已阅读 <a href=""> 服务条款 </a>|<a href=""> 服务条款 </a>
<span data-val="169">169元</span>
</div>
<div class="clear"></div>
</div>
<!-- 价格部分 -->
<div class="detailShop_up">
<P><span>小米8</span><span>黑色</span><span>6GB+64GB</span></P>
<span id="phonePrice">599元</span>
<div class="clear"></div>
<h2 id="totalPrice">总计 ： 599元</h2>
</div>
<div class="detailShop_new">加入购物车</div>
<p style="margin:20px 0px;"><i class="fa fa-check-circle-o"></i> 7天无理由退货 <i class="fa fa-check-circle-o"></i> 15天质量问题换货 <i class="fa fa-check-circle-o"></i> 365天保修 </p>
</div>
</div>
<div class="clear"></div>
<!-- 商品部分两个说明 -->
<div class="detailShop_bottm">
<div class="detailShop_bottm_1">
<p>特别说明</p>
<img src="images/sm.jpg">
<p>官方微信</p>
<img src="images/2.jpg">
</div>
</div>
-----------------------------------------------css部分----
/* 商品详情页 */
a{color:RGB(68,68,68)}
.clear{clear: both;}
h1,h2,h3,h4{font-weight:300;}
/* 详情页内部上导航 */
.detail{width:100%;height:65px; border-top:1px solid #ccc; box-shadow: 0px 3px 10px #ccc;line-height: 65px;}
.detailTop{width:1226px; margin:0px auto;}
.detailTop a{font-size: 12px;}
.detailTop a:hover{color:#ff6700;}
.detailTop_left{float: left;}
.detailTop_right{float: right;}
.detailTop span{display:inline-block; margin:0px 6px; border-left:1px solid #ccc; width:1px;height: 12px;}
/* 商品详情部分 */
/*主体部分*/
.detailShop{width:1226px; margin: 30px auto 0px;}
.detailShop_left{width:600px; height:600px; float: left; }
.detailShop_right{width:600px; float: right; }
/*商品详情右部*/
.detailShop_right h1{font-size: 28px;}
.detailShop_right p{font-size: 13px; color:#ccc}
.detailShop_right>h2{color:#ff6700; height:50px; line-height:50px; border-bottom:1px solid #ccc;}
/*地址部分*/
.detailShop_map{width:568px; height:40px; font-size: 15px; background:RGB(250,250,250); border:1px solid #ccc;
margin: 30px 0px; padding: 30px 0px 30px 30px;}
/*版本部分*/
.detailShop_rev{line-height:50px; }
.detailShop_rev span{color:#ccc; margin-left:70px;}
.detailShop_revLeft{width:275px;height:50px; border:1px solid #ccc; padding-left: 20px; float: left;}
/*颜色部分*/
.detailShop_color h3{margin: 20px 0px 10px;}
.detailShop_color_A{width:295px;height:50px; border:1px solid #ccc; float: left; margin: 5px 0px;}
.detailShop_color span,.detailShop_color_A{line-height: 50px; text-align: center;}
.detailShop_color span{width:16px; height:16px; display:inline-block; border-radius: 8px; margin-right:10px;}
.detailShop_color_A_Rev{border:1px solid #ff6700;}
/*保障部分*/
.detailShop_bz{height:60px; line-height: 60px;}
.detailShop_bz h3{float: left; display:inline-block;}
.detailShop_bz a{float: right; font-size: 14px; color:#ff6700}
/* 保障文本框 */
.detailShop_bz1{width:598px;height:148px; border:1px solid #ccc;}
.detailShop_bz1 i{ margin:60px 0px 60px 40px;float: left; width:12px; height:12px; border-radius: 7px;}
.detailShop_bz1 b{width:12px;height:12px;}
.detailShop_bz1 img{margin:50px 20px;float: left;}
.detailShop_bz1_1{margin: 40px 0px; line-height: 25px;}
.detailShop_bz1_1 a{color:#ccc;}
.detailShop_bz1_1 span{margin-left: 150px;color: #aaa}
.detailShop_hide{color:rgba(0,0,0,0);border:1px solid #ccd;} 使用rgba颜色格式遮罩
/* 价格部分 */
.detailShop_up{width:600px;height:130px; background:RGB(249,249,250); margin:30px 0px;}
.detailShop_up p{float: left; margin: 20px 0px 20px 30px; color:#000}
.detailShop_up>span{float: right; margin: 20px 20px 20px 0px;}
.detailShop_up h2{margin: 15px 0px 0px 30px; color:#ff6700}
.detailShop_new{width:300px;height:50px; background:#ff6700;color:#fff; line-height:50px;text-align: center;}
/* 商品部分两个说明 */
.detailShop_bottm{width:100%; background:RGB(249,249,250);}
.detailShop_bottm_1{width:1226px; margin:10px auto; }
------------------------jQuery部分-------------------------------
$(document).ready(function(){
//默认选中版本和颜色第一个框
$('.detailShop_rev div:first').css('border','1px solid #ff6700'); //使用后代选择器:first 方法
$('.detailShop_color_A').eq(0).addClass('detailShop_color_A_Rev'); //使用eq指定索引遍历方法，然后添加class
//被点击版本变色 先还原CSS样式，后添加CSS样式
$('.detailShop_revLeft').click(function(){
$('.detailShop_revLeft').css('border','1px solid #ccc');
$(this).css('border','1px solid #ff6700');
updateTotalPrice()
})
//被点击颜色变色 先删除class，后添加CLASS
$('.detailShop_color_A').click(function(){
$('.detailShop_color_A').removeClass('detailShop_color_A_Rev');
$(this).addClass('detailShop_color_A_Rev');
updateTotalPrice()
})
//选中小米提供的保障服务
//点击类shop_detail_bz1事件
$('.detailShop_bz1').click(function(){
// 使用遍历找到当前div中含有类名.fa-check-circle的元素并获取clss名，赋值给变量nowcircleclass
var nowcircleclass=$(this).find('.fa-check-circle').attr('class')
var nowclass=$(this).find('.fa-check-square').attr('class')
//当变量nowcircleclass勾选上时执行；indexOf返回内部长度('checked>0被选中的意思'）
if(nowcircleclass.indexOf('checked')>0){
//如果被选中，就除移选中 重新定义变量 replace重新定义 checked被选中为空
nowcircleclass=nowcircleclass.replace('checked','')
nowclass=nowclass.replace('checked','')
//找到当前.fa-check-circl名的class,修改成上面被移除了checked的变量，同时css样式颜色样式为不透明的白色
$(this).find('.fa-check-circle').attr('class',nowcircleclass).css('color','rgba(0,0,0,0)')
$(this).find('.fa-check-square').attr('class',nowclass).css('color','rgba(0,0,0,0)')
}else{
//如果没有被选中，就选中checked就是负值
//那么当前的.fa-check-circl名的class, 加上checked选中，同时css字体颜色为橙色
$(this).find('.fa-check-circle').attr('class',nowcircleclass+'checked').css('color','#ff6700')
$(this).find('.fa-check-square').attr('class',nowclass+'checked').css('color','#ff6700')
}
updateTotalPrice()
})
//统计总价格
function updateTotalPrice(){
//版本价钱
//.detailShop_revLeft[class$='checked']选中的class名，遍历span返回data-val属性值
var bbprice=$(".detailShop_revLeft[class$='checked']").find('span').attr('data-val')*1;
//服务价钱
var svprice=0;
var svspan=$(".fa-check-circle[class$='checked']").parent('.detailShop_bz1').find('span[data-val]');
for(var i=0;i<svspan.length;i++){
svprice+=svspan[i].getAttribute('data-val')*1;
}
//总价值
var totalprice=bbprice+svprice;
$('#totalPrice').html('总计 ： '+totalprice+'元')
$('#phonePrice').html(bbprice+'元');
y=document.getElementById("id名"); // 找到元素
y.innerHTML=('改变的内容') // 改变内容
}
})
批改老师：韦小宝批改时间：2019-03-04 11:15:29
老师总结：写的是很不错 但是像这种代码很长 而且还涉及到了外部样式 记得要附上效果图哦
