サマリー：<!-- 商品詳情頁(yè) --> <!-- 詳情頁(yè)內(nèi)部上導(dǎo)航 --> <div class="detail"> <div class="detailTop"> <!--上導(dǎo)航條居中
<!-- 商品詳情頁(yè) -->
<!-- 詳情頁(yè)內(nèi)部上導(dǎo)航 -->
<div class="detail">
<div class="detailTop"> <!--上導(dǎo)航條居中-->
<div class="detailTop_left"> <!--左浮動(dòng)-->
<b>小米8</b><span></span><a href="">小米8 SE</a>
</div>
<div class="detailTop_right"> <!--右浮動(dòng)-->
<a href="">概述</a>
<span></span>
<a href="">圖集</a>
<span></span>
<a href="">參數(shù)</a>
<span></span>
<a href="">F碼通道</a>
<span></span>
<a href="">用戶(hù)評(píng)價(jià)</a>
</div>
</div>
</div> <!-- 詳情頁(yè)內(nèi)部上導(dǎo)航結(jié)束 -->
<!-- 商品詳情部分 -->
<div class="detailShop">
<div class="detailShop_left">
<!-- 左部產(chǎn)品輪播圖 -->
</div>
<div class="detailShop_right">
<h1>紅米6A</h1>
<p>12nm高性能處理器 / 5.45" 小巧全面屏 / 1300萬(wàn)高清相機(jī) / “小楊柳腰”機(jī)身</p>
<h2>599</h2>
<div class="detailShop_map">
<i class="fa fa-map-marker"style="color:#ccc;" ></i>
<span>北京 北京市 東城區(qū) 永定門(mén)外街道 <a href="" style="color:#ff6700;">修改</a></span><br>
<span style="color:#ff6700;">有現(xiàn)貨</span>
</div>
<!-- 版本部分 -->
<div class="detailShop_rev">
<h3>選擇版本</h3>
<div class="detailShop_revLeft" style="margin-right:6px;">
4GB+64GB 全網(wǎng)通 <span data-val="599">599元</span>
</div>
<div class="detailShop_revLeft">
6GB+64GB 全網(wǎng)通 <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>選擇小米提供的保障服務(wù)</h3>
<a href="">了解保障服務(wù) ></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>意外保障服務(wù)</h3>
<p>手機(jī)意外摔落/進(jìn)水/碾壓等損壞</p>
<b class="fa fa-check-square detailShop_hide"></b> 我已閱讀 <a href=""> 服務(wù)條款 </a>|<a href=""> 服務(wù)條款 </a>
<span data-val="99">99元</span>
</div>
</div>
<div class="detailShop_bz1">
<!-- class名復(fù)合寫(xiě)法 -->
<i class="fa fa-check-circle detailShop_hide"></i>
<img src="images/bz.jpg" alt="">
<div class="detailShop_bz1_1">
<h3>意外保障服務(wù)</h3>
<p>手機(jī)意外摔落/進(jìn)水/碾壓等損壞</p>
<b class="fa fa-check-square detailShop_hide"></b> 我已閱讀 <a href=""> 服務(wù)條款 </a>|<a href=""> 服務(wù)條款 </a>
<span data-val="169">169元</span>
</div>
<div class="clear"></div>
</div>
<!-- 價(jià)格部分 -->
<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">總計(jì) ： 599元</h2>
</div>
<div class="detailShop_new">加入購(gòu)物車(chē)</div>
<p style="margin:20px 0px;"><i class="fa fa-check-circle-o"></i> 7天無(wú)理由退貨 <i class="fa fa-check-circle-o"></i> 15天質(zhì)量問(wèn)題換貨 <i class="fa fa-check-circle-o"></i> 365天保修 </p>
</div>
</div>
<div class="clear"></div>
<!-- 商品部分兩個(gè)說(shuō)明 -->
<div class="detailShop_bottm">
<div class="detailShop_bottm_1">
<p>特別說(shuō)明</p>
<img src="images/sm.jpg">
<p>官方微信</p>
<img src="images/2.jpg">
</div>
</div>
-----------------------------------------------css部分----
/* 商品詳情頁(yè) */
a{color:RGB(68,68,68)}
.clear{clear: both;}
h1,h2,h3,h4{font-weight:300;}
/* 詳情頁(yè)內(nèi)部上導(dǎo)航 */
.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顏色格式遮罩
/* 價(jià)格部分 */
.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;}
/* 商品部分兩個(gè)說(shuō)明 */
.detailShop_bottm{width:100%; background:RGB(249,249,250);}
.detailShop_bottm_1{width:1226px; margin:10px auto; }
------------------------jQuery部分-------------------------------
$(document).ready(function(){
//默認(rèn)選中版本和顏色第一個(gè)框
$('.detailShop_rev div:first').css('border','1px solid #ff6700'); //使用后代選擇器:first 方法
$('.detailShop_color_A').eq(0).addClass('detailShop_color_A_Rev'); //使用eq指定索引遍歷方法，然后添加class
//被點(diǎn)擊版本變色 先還原CSS樣式，后添加CSS樣式
$('.detailShop_revLeft').click(function(){
$('.detailShop_revLeft').css('border','1px solid #ccc');
$(this).css('border','1px solid #ff6700');
updateTotalPrice()
})
//被點(diǎn)擊顏色變色 先刪除class，后添加CLASS
$('.detailShop_color_A').click(function(){
$('.detailShop_color_A').removeClass('detailShop_color_A_Rev');
$(this).addClass('detailShop_color_A_Rev');
updateTotalPrice()
})
//選中小米提供的保障服務(wù)
//點(diǎn)擊類(lèi)shop_detail_bz1事件
$('.detailShop_bz1').click(function(){
// 使用遍歷找到當(dāng)前div中含有類(lèi)名.fa-check-circle的元素并獲取clss名，賦值給變量nowcircleclass
var nowcircleclass=$(this).find('.fa-check-circle').attr('class')
var nowclass=$(this).find('.fa-check-square').attr('class')
//當(dāng)變量nowcircleclass勾選上時(shí)執(zhí)行；indexOf返回內(nèi)部長(zhǎng)度('checked>0被選中的意思'）
if(nowcircleclass.indexOf('checked')>0){
//如果被選中，就除移選中 重新定義變量 replace重新定義 checked被選中為空
nowcircleclass=nowcircleclass.replace('checked','')
nowclass=nowclass.replace('checked','')
//找到當(dāng)前.fa-check-circl名的class,修改成上面被移除了checked的變量，同時(shí)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{
//如果沒(méi)有被選中，就選中checked就是負(fù)值
//那么當(dāng)前的.fa-check-circl名的class, 加上checked選中，同時(shí)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()
})
//統(tǒng)計(jì)總價(jià)格
function updateTotalPrice(){
//版本價(jià)錢(qián)
//.detailShop_revLeft[class$='checked']選中的class名，遍歷span返回data-val屬性值
var bbprice=$(".detailShop_revLeft[class$='checked']").find('span').attr('data-val')*1;
//服務(wù)價(jià)錢(qián)
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;
}
//總價(jià)值
var totalprice=bbprice+svprice;
$('#totalPrice').html('總計(jì) ： '+totalprice+'元')
$('#phonePrice').html(bbprice+'元');
y=document.getElementById("id名"); // 找到元素
y.innerHTML=('改變的內(nèi)容') // 改變內(nèi)容
}
})
添削の先生：韋小寶添削時(shí)間：2019-03-04 11:15:29
先生のまとめ：寫(xiě)的是很不錯(cuò) 但是像這種代碼很長(zhǎng) 而且還涉及到了外部樣式 記得要附上效果圖哦