Salam cikgu, sila bantu saya membuat kesilapan semasa memilih versi dan warna Apabila saya memilih yang kedua, warna pilihan lalai tidak kembali kepada warna asal.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="/stylesheets" href="/stylesheets" href=" detail.css" />
<link rel="stylesheet" href="static/css/layui.css" />
<link rel="stylesheet" href="static/css/style. css" />
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
<script type= "text/javascript" src="static/js/layui.all.js" ></script>
<script type="text/javascript" src="static/js/jquery-3.3.1. min.js" ></script>
<script type="text/javascript" src="static/js/detail.js" ></script>
<title>红米6A立即购买—小米商城</title>
<style>
*{padding: 0;margin: 0;list-style: none;text-decoration: none;}
.header-lr{width:100%;height: 50px; bayang-kotak: 0px 10px 10px #ccc;margin-top: 10px;border-top: 2px pepejal #ccc;}
.header-lr-box{width: 1226px; ketinggian: 50px;margin:0 auto;}
.header-lefts li{width:70px;height: 50px;float: left;text-align: center;line-height: 50px;}
.header-lefts li a{color: #23262E;font-size: 14px;font-weight: none;}
.header-right{float: right;}
.header-right li{float: left; lebar: 70px;height: 50px;line-height: 50px;text-align: center;}
.header-right span{float: left;line-height: 50px; warna: #aaa;saiz fon: 12px;}
.detail-img{lebar: 1226px;margin: 0 auto;}
.detail-img h6{saiz fon: 16px;berat fon: bold;margin : 10px auto;float: left;}
/*主要内容*/
.content-box{lebar: 1226px;margin: 30px auto;}
.content-box-left{width: 560px; tinggi: 600px;float: kiri;}
.content-box-right{width: 600px;float: right;}
.content-box-right p{color: #aaa;margin: 10px auto;}
.content-box-map{width: 100%;height: 100px;background: /*rgba(51,51,51,0.2)*/#fafafa;margin: 20px auto;border: 1px solid #ccc;}
.content-box-map span{display: inline-block;margin-top: 10px;margin-left: 15px;}
.content-box-map i{position: relative;left: 12px;}
.content -box-money .rls{border: 1px solid #FF8200;}
.content-box-money div{width: 255px;height: 50px;text-align: center;float: left;border: 1px solid #ccc; ketinggian garis: 50px; padding: 0px 20px;}
.jangka-kotak-isi kandungan{float: kanan;warna: #ccc;}
.content-box-money p{font-size: 18px;color: #333;margin: 15px 0px;}
.content-box-color p{font-size: 18px; warna: #333; jidar: 15px auto;}
🎜.content-box-color div{width:255px ; height:50px ;float: left; padding:0px 20px;text-align: center;line-height: 50px;border:1px solid #ccc;}🎜.rentang warna-kotak-kandungan{display:inline-block;height: 16px;width: 16px;border-radius: 8px;margin-right: 10px;}
.content-bz-box0 p{float: left; saiz fon: 18px; warna: #333;margin: 20px 0px;}
.content-bz-box0 a{float: right;font-size: 14px; jidar: 20px 0px; warna: #ff8200;}
.content-bz-box1{lebar: 598px;tinggi: 150px;sempadan: 1px pepejal #ccc;}
.content-bz-box1 span{float: kiri;lebar: 10px;tinggi : 10px;line-height: 10px;border-radius: 6px;display: inline-block;margin: 60px auto;margin-left: 40px;}
.content-bz-box1 img{float: left;margin: 50px 20px;}
.content-bz-p{margin: 40px auto;}
.content-bz-p p{margin: 10px auto;}
.content-bz-p span{float: right;margin: 0px;margin-kanan:20px; warna: #ccc;lebar: 50px;}
.content-bz-btn{color:rgba(0,0,0,0);border: 1px solid #ccc;}
.content-zs{width: 100 %; ketinggian: 130px;latar belakang: #f9f9f9;margin-top: 30px;}
.content-zs div{margin: 0px 30px 20px;height: 50px; ketinggian garisan: 30px; }
.content-zs p {float: left;}
.content-zs span{float: right;line-height: 50px;}
.content-box-color .rls{border: 1px pepejal #FF8200;}
.isi-kotak-wang,.isi-kotak-warna{lebar: 600px;}
.shop-che{lebar: 240px;tinggi: 50px;teks-jajar: tengah;garis-tinggi : 50px;latar belakang: #FF5722;warna: #FFF; }
</style>
</head>
<body>
<div class="header"&
; <ul class="menu-left"> <li> <a href="#">小米商城</a><span>|</span>|</span </li> <li> <a href="#">MIUI</a><span>|</span></li> <li><a href="#">IOT</a><span>|</span></li>
<li>
<a href="#">云服务</a><span>|</span></li>
<li>
<a href="#">小爱分享平/lta; span>|</span></li>
<li>
<a href="#">金融</a><span>|</lt;/gt; li>
<li>
<a href="#">有品</a><span>|</span></li>
<li>
<
<a href="#">企业服务</a><span>|</span></li> <li><a href="#">SelectRegion</a>
</li>
</ul>
<div class="menu-right">
< <li> <a href="#">登录</a><span>|</span></li> <li> href="#">注册</a><span>|</span></li> <li> <a href="#">我的订单;/a> </li> <li class="menu-rshop"> <a><i class="fa fa-shopping-cart"> 购物车(0)</i></a> <div>购物车中还没有商品，赶紧选购吧！</div！<
</ ul>
</div>
</div>
</div>
<div class="contents" style="latar belakang: #F6F6F6;;"
<div class="content">
<div class="contentMenu">
;
"contentMenu-ul"><li>小米手机
<div class="mi-box">
" div class="mi-box1">
<div class="mi-new">新品</div>
<div class="mi-shop">
<img src ="static/images/phone/phone1.png" />
<br />
<a href="#">小米2s</a>
<br />
<a href="#" style=" color: #FF8200;">3299元</a>
</div>
</div>
<span> span>
<div class="mi-box1">
<div class="mi-new">新品</div>
<div class="mi-shop">
<img src="static/images/phone/phone1.png" />
<br />
<a href ="#">小米2s</a>
<br />
<a href="#" style=" color: #FF8200;">3299元</a>
</div>
</div>
<span></span>
<div class="mi-box1">
<div class="mi-new" ;新品</div>
<div class="mi-shop">
<img src="static/images/phone/phone1.png" />
<br />
<a href="#">小米2s</a>
<br />
<a href="#" style=" color: #FF8200;">3299元< ;/a>
</div>
</div>
<span></span>
<div class="mi-box1">
"mi-new">新品</div> <div class="mi-shop"> <img src="static/images/phone/phone1.png" /> <br /> <a href="#">小米2s</a> <br /> <a href="#" style=" color: #FF8200; ">3299元</a> </div> </div> <span></span> <<
</div></li> <li>红米 <div class="mi-box"> <div class="mi-boxdiv"> <div class=" mi-box1"> <div class="mi-new">新品</div> <div class="mi-shop"> <img src="static/ images/phone/phone1.png" /> <br /> <a href="#">小米2s</a> <br /> <a href="#" style=" color: #FF8200;">3299元</a> </div> </div>
<span></span>
<div class="mi-box1">
<div class="mi-new">新品</div>
div class="mi-shop"> <img src="static/images/phone/phone1.png" /> <br /> <a href="#"> ;小米2s</a> <br /> <a href="#" style=" color: #FF8200;">3299元</a> </div </div> <span></span> <div class="mi-box1"> <div class="mi-new"><新div> <div class="mi-shop"> <img src="static/images/phone/phone1.png" /> <br /> <a href="#">小米2s</a> <br /> <a href="#" style=" color: #FF8200;">3299元</a></div> </div> <span></span> <div class="mi-box1"> <div" class="mi-box1" >新品</div> <div class="mi-shop"> <img src="static/images/phone/phone1.png" /> <br /> ; <a href="#">小米2s</a> <br /> <a href="#" style=" color: #FF8200;">3299元</a> </div> </div> <span></span> </div>
</liv>
; t ; <li>电视</li> <li>笔记本</li> <li>盒子</li>我><li>路由器 <div class="mi-box"> <div class="mi-boxdiv"> <div class="mi-box1">
<div class="mi-new">新品</div>
<div class="mi-shop">
<img src="static/images/phone/phone1.png" />
<br />
<a href ="#">小米2s</a>
<br />
<a href="#" style=" color: #FF8200;">3299元</a>
</div>
</div>
<span></span>
<div class="mi-box1">
<div class="mi-new" ;新品</div>
<div class="mi-shop">
<img src="static/images/phone/phone1.png" />
<br />
<a href="#">小米2s</a>
<br />
<a href="#" style=" color: #FF8200;">3299元< ;/a>
</div>
</div>
<span></span>
<div class="mi-box1">
"mi-new">新品</div> <div class="mi-shop"> <img src="static/images/phone/phone1.png" /> <br /> <a href="#">小米2s</a> <br /> <a href="#" style=" color: #FF8200; ">3299元</a> </div> </div> <span></span> << box1
<div class="mi-new">新品</div> <div class="mi-shop"> <img src="static/images/phone/phone1.png " /> <br /> <a href="#">小米2s</a> <br /> <a href="#" style= " warna: #FF8200;">3299元</a> </div> </div> <span></span></span>
</div></li>
<li>智能硬件</li>
<li>服务</li>
;<li>
;<
</ ul> <div class="contentMenu-form"> <form action=""> <input type="text" /> <div class="contentMenu- intxt"> <a href="#">预热618</a> <a href="#">小米电视</a> <<
<<div class="sousou-btn"><i class="fa fa-search"></i></div>
</form>
</div>
</div>
</div>
</div>
<div class="clear"></div>
" <er-divr >
<div class="header-lr-box">
<div class="header-lefts">
<ul>
<li>
;小米8</a>
</li>
<li>
<a>小米8se</a>
<&
</ div>
<div class="header-right">
<ul>
<li>
<a>概述</a></a>< ;|</span>
<li>
<a>图集</a>
</li><span>|</span>
<a>参数</a>
</li><span>|</span>
<li>
<a>頭
</li><span>|</span> <li> <a>用户评价</a> <&
<ul> ;
</div>
</div>
<!--Penghujung bahagian pengepala-->
<div class="content-box">
<div class="content-box-left">
< ;div class="layui-carousel" id="test1">
<div carousel-item>
<div><img src="static/images/lun/1.jpg"> < ;/div>
<div><img src="static/images/lun/2.jpg"></div>
<div><img src="static/images/ lun /3.jpg"></div>
<div><img src="static/images/lun/4.jpg"></div>
</div>
</div> Pemproses / 5.45" skrin penuh kompak / 13 juta kamera definisi tinggi / badan "Pinggang willow kecil"</p>
...
" " <span> ;Beijing Bandar Beijing Daerah Dongcheng Yongdingmenwai Street <a href="#" style="color: #FF8200;">Ubah suai</a></span> ;<br
. 4G+64G Penuh Netcom<span data-val="599">599</span></div> + 64G Full Netcom<span data-val="699">699</span></div> ;<div class="content-box-color">
<p>选择颜色</p>
-content ;-v-color class="content-color-content" " style="margin-right: 5px;margin-bottom: 5px;"><span style="background:#F6E6D8;"></span>金色</div>
< ="content-color-left"><span style="background:#3C3F43;"></span>深灰</div>
<div class="content-color-left" style="margin-right: 5px;"><span style="background:#D93239;"></span>亮红</div>
<div class="content-color- left"><<span style="background:#3871B7;"></span>亮蓝</div>
</div>
;& div t="clear class" ;/div>
<div class="content-box-bz">
<div class="content-bz-box0">保障服务< /p>
<a href="#">了解保障条款</a>
<div class="clear"><<</div gt;
< ;div class="content-bz-box1">
<span class="fa fa-check-circle content-bz-btn"></span>
<img src="static images/bz.jpg">
<div class="content-bz-p">
<p style="font-size: 18px; warna: #000;">意外保障服务</p>
<p>手机意外摔落/进水/碾压等损坏<fa check-square content-bz-btn"></b> 我已阅读 <a href="#"> 服务条款 </a><a><a> "#"> 服务条款 </a>
<span data-val="99">99元</span>
</div>>
</div>;
</div>
kelas "> /images/bz.jpg">
<div class="content-bz-p">
<p style= "font-size: 18px; color: #000;">Perkhidmatan perlindungan skrin rosak</p>
<p>Skrin telefon pecah secara tidak sengaja</p>
<b class="fa-check -square content-bz-btn"></b> Saya telah membaca <a href="#"> Syarat Perkhidmatan </a>|<a href="# "> Syarat Perkhidmatan </a>
<span data-val="179">179 yuan</span>
</div> " ></div> ;
; t;</div>
<p id="tojg" style="color:#FF6A00;font-size: 25px;margin-left: 30px;"> ;Jumlah ： 699 yuan</p>
; ; ; ; gt;</i> 7 hari tiada soalan ditanya < i class="fa fa-check-circle-o"></ i> Penggantian 15 hari untuk isu kualiti <i class="fa fa-check-circle-o"></ i> Waranti 365 hari</p>
/div>
</div>
<t;gt;;
<!--Penerangan-->
<div class="detail-img">
<h6>Arahan khas</h6>
<img src="images" /sm.jpg" />
<h6>WeChat Rasmi</h6>
<img src="static/images/2.jpg" />
</div>
<a href="#"><i class="fa-wrench"> Tempah perkhidmatan pembaikan</i><span>|</span></a> ;
<a href="#"><i class="fa-rotate-right"> 7 hari tiada soalan diajukan</i><span>|</span> a> <a href="#"><i class="fa fa-refresh"> 15 hari pertukaran percuma</i><span>|</ span></ a> <a href="#"><i class="fa-gift"> Penghantaran percuma</i><span>|< ;/span></a> <a href="#"><i class="fa-map-marker"> Lebih daripada 520 cawangan selepas jualan</i>< /a> </ div> </div> </div>
<div class="for-li-1">
<div class="for-li-a">
<dl>
<dt>Pusat Bantuan</ dt> ;
<dd>
<a href="#">Pengurusan Akaun</a>
</dd>
<dd>
" <a href="# Panduan Membeli-belah</a>
</dd>
<dd>
<a href="#">Operasi Pesanan</a>
</dd>
</dd>>
</dd> <dd> <a href="#">Layanan diri</a> </dd> <dd> href = "#" & gt; muat turun yang berkaitan & lt;/a & gt; & lt;/dd & gt; & lt;/dl & gt; & lt; dl & gt; & lt; dt & gt; ; <a href="#">Xiaomi Home</a> </dd> <dd> <a href="#">Cawangan perkhidmatan </a ; </dd> <dd> <a href="#">Kedai Pengalaman Dibenarkan</a> </dd>;
<;dl>
<dt> Perihal Xiaomi /dd>
<dd>
<a href="#">Sertai Xiaomi</a>
<
<;
<a href="# ">Perhubungan Pelabur</a>
</dd>
</dl>
<dl>
;Follow us </dd> ; <dd> <a href="#">Sina Weibo</a> </dd> <dd>;
<dd>;
Weibo rasmi< /a> </dd> <dd> <a href="#">Hubungi kami</a> </dd></dd> ;
<dl>
<dt>Perkhidmatan Khusus</dt>
<dd>
<a href="#">F码通道</a>
</dd>
<dd>
<a href="#">>礼物破;
</dd>
<dd>
<a href="#">防伪查询</a>
</dd>
</dd>;div class="for-conten">
<p class="suorg">Feir-520-1314</p>
<p class="suorg-1">周一至周日8:00-18:00<br />(仅收市话费)</p>
<button class="btn"><span class="fa-komen"></ span> 联系客服</button>
</div>
</div>
</div>
<div class="clear"&
class="for-end"> <div class="end-1" style="margin-right: 15px;"><img src="static/images/footlogo.png" alt=" " /></div> <div class="end-2">
;li>
;小米商城<span></span></li> <li>MIUI<span></span></li>;
< /span></li> <li>米聊<span></span></li> <li>多看<gt;<> li> <li>游戏<span></span></li> <li>路由器<span><<.gt;<< ;米粉卡<span></span></li> <li>政企服务<span></span></li>猜猜店< ;span></span></li> <li>隐私政策<span></span></li><<li< / span></li>
<li>Pilih Wilayah</li>
</ul>
</div>
<div class="endli-p">
<a href="#">©mi.com</a>
No. Sijil ICP Beijing 110507
<a href= " #">Beijing ICP No. 10046444</a>
<a href="#">Beijing Public Network Security No. 11010802020134</a><.;< [2014] No. 0059-0009</a>
</a>
<br> Talian pelaporan maklumat yang tidak sah dan berbahaya: 185-0130-1238, kecuali dinyatakan sebaliknya, kecuali dinyatakan sebaliknya data datang daripada ujian makmal kami
</div>
</div>
<div class="end-3">
<img src="static/images/ footericon1.png" alt="" class="icon" style="margin-right: 10px;" />
<img src="static/images/footericon2.png" alt="" class="icon " style=" margin-kanan: 10px;" />
<img src="static/images/footericon3.png" alt="" class="icon" style="margin-right: 10px;" / >
<img src="static/images/footericon4.png" alt="" class="icon" style="margin-right: 10px;" />
<img src="static/ images/footericon5. png" alt="" class="icon" />
</div>
<div class="font">Teroka teknologi hitam, Xiaomi lahir kerana demam! </div>
</div>
</body>
<skrip>
layui.use('carousel', function(){
var carousel = layui.carousel. //Build
instance.render({
elem: '#test1'
,width: '560px' //Tetapkan lebar bekas
,height:'600px'
,anak panah: 'sentiasa' //Sentiasa paparkan anak panah
/, anim: 'updown' //Tukar mod animasi
});
});
</script>
<skrip>
//Versi lalai pertama Gantikan kaedah nama kelas
$( document ).ready(function(){
//Dapatkan kelas eq traversal (0) bermula dari 0 (mewakili yang pertama) dan gantikan nama kelas dengan .content-box-bb rls
$(".detail_much_left ").eq (0).attr("class",".detail_much_left rls")
$(".content-color-left").eq(0).attr("class",".content-color -rls kiri" )
//Klik pada versi yang dipilih
$(".detail_much_left").klik(function(){
$(".detail_much_left").attr("class",". detail_banyak_kiri")
$(this).attr("class",".detail_banyak_left rls")
})
//Klik untuk menukar warna
$(".content-color-left"). klik(fungsi(){
$(".warna-kandungan-kiri").attr("kelas",".warna-kandungan-kiri")
$(ini).attr("kelas",". content-color-left" rls ")
})
})
</script>
</html>
