検索

ホームページ  >  に質問  >  本文

先生、助けてください。バージョンと色の選択を間違えてしまい、2番目を選択してもデフォルトのオプションの色が元の色に戻りません。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<link rel="stylesheet" href="static/css/detail.css" />

<link rel="stylesheet" href="static/css/layui.css" />

<リンク 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{幅:100%;高さ:50px; box-shadow: 0px 10px 10px #ccc;margin-top: 10px;border-top: 2px ソリッド #ccc;}

.header-lr-box{width: 1226px;高さ: 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;幅: 70px;高さ: 50px;line-height: 50px;text-align: center;}

.header-right span{float: left;line-height: 50px; color: #aaa;font-size: 12px;}

.detail-img{width: 1226px;margin: 0 auto;}

.detail-img h6{font-size: 16px ;font-weight: 太字;マージン: 10px 自動;浮動小数点: 左;}

/*主要内容*/

.content-box{幅: 1226px;マージン: 30px 自動;}

.content-box-left{幅: 560px;高さ: 600px;浮動小数点: 左;}

.content-box-right{幅: 600px;浮動小数点: 右;}

.content-box-right p{色: #aaa; margin: 10px auto;}

.content-box-map{width: 100%;height: 100px;background: /*rgba(51,51,51,0.2)*/#fafafa;margin: 20px auto;border: 1px ソリッド #ccc;}

.content-box-map span{display: inline-block;margin-top: 10px;margin-left: 15px;}

。 content-box-map i{位置: 相対;左: 12px;}

.content-box-money .rls{ボーダー: 1px 実線 #FF8200;}

.content-box-お金 div{幅: 255px;高さ: 50px;text-align: center;float: left;border: 1px 実線 #ccc;line-height: 50px;padding: 0px 20px;}

.content-box -マネー スパン{float: right;color: #ccc;}

.content-box-money p{font-size: 18px;color: #333;margin: 15px 0px;}

.content-box-color p{font-size: 18px;カラー: #333;マージン: 15px auto;}

.content-box-color div{width:255px ;高さ:50px ;float:left;padding:0px 20px;text-align:center;line-height:50px;border:1px 実線 #ccc;}

.content-box-color スパン{表示:インラインブロック;高さ: 16px;幅: 16px;border-radius: 8px;margin-right: 10px;}

.content-bz-box0 p{float: left;font-size: 18px;カラー: #333;マージン: 20px 0px;}

.content-bz-box0 a{float: right;font-size: 14px;マージン: 20px 0px;カラー: #ff8200;}

.content-bz-box1{幅: 598px;高さ: 150px;ボーダー: 1px ソリッド #ccc;}

.content-bz-box1 スパン{フロート: left;width: 10px;height: 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 スパン{float: right;margin: 0px;margin-right:20px;カラー: #ccc;幅: 50px;}

.content-bz-btn{color:rgba(0,0,0,0);ボーダー: 1px ソリッド #ccc;}

.content-zs{幅: 100%;高さ: 130px;背景: #f9f9f9;マージントップ: 30px;}

.content-zs div{マージン: 0px 30px 20px;高さ: 50px;行の高さ: 30px; }

.content-zs p {浮動小数点: 左;}

.content-zs スパン{浮動小数点: 右;行の高さ: 50px;}


.content-box-color .rls{枠線: 1px 無地 #FF8200;}

.content-box-money,.content-box-color{幅: 600px;}

.shop-che{幅: 240px;高さ: 50px;text-align: center;line-height: 50px;background: #FF5722;color: #FFF; }



</style>

</head>

<body> ;

<div class="header">

<div class="menu">

<ul class="menu-left"> ;

<li>

<a href="#">小米商城</a><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="#">小爱分享平台</a><span>|</span></li>

<li>

<a href="#">金融</a><span>|</span></li>

<li>

<a href="#">有品</a><span>|</span></li>

<li>

<a href="#"> 企业服务</a><span>|</span></li>

<li>

<a href="#">SelectRegion</a>

</li>

</ul>

<div クラス="menu-right">

<ul>

<li>

<a href="#">ログイン</a> < ;span>|</span></li>

<li>

<a 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>

</li>

</ul>

</div>

</div>

</div>

<div class="contents" style="background: #F6F6F6;;">


# <div class="content">

<div class="contentMenu">

<div class="contentMenu-imgbox">## <img src="static/images/footlogo.png" style="margin: 3px 5px;margin-right: 10px;" />

<img src="static/images/logoAD . gif" />

</div>

<!--新製品 N をプルダウンします-->

<ul class="contentMenu- ul ">

<li>Xiaomi 携帯電話

<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="#">Xiaomi 2s</a>

<br />

< ;a href="#" style=" color: #FF8200;">3299 元</a>

</div>

</div>

<span></span>

<div class="mi-box1">

<div class="mi-new">新製品< / ディビジョン>

<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>

</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-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>

</div>

</li>

<li>电影</li>

<li>笔记本</li>

<li>盒子</li>

<li>新しい</li>

<li>路由器

<div class="mi-box">

< div class="mi-boxdiv">

<div class="mi-box1">

<div class="mi-new"> 新品</分割(&G);

<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-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>

</div>

</li>

<li>智能ハードウェア</li>

<li>服务</li>

<li>社区</li>

</ul>

<div class="contentMenu-form">

<フォームアクション="">

<input type="text" />

<div class="contentMenu-intxt">

<a href ="#">预热618</a>

<a href="#">小米電視</a>

</div>

<div class="sousou-btn"><i class="fa fa-search"></i></div>

</form>

</div>

</div>

</div>

</div>

< ;div class="clear"></div>

<div class="header-lr">

<div class="header-lr-box" >

<div class="header-lefts">

<ul>

<li>

<a>小米8</a>

</li>

<li>

<a>小米8se</a>

< ;/li>

</ul>

</div>

<div class="header-right">

<ul>

<li>

<a>概要</a>

</li><span>|</span> ;

<li>

<a>図集</a>

</li><span>|</span>

<li>

<a>パラメータ</a>

</li><span>|</span>

<li>

<a>Fコード通道</a>

</li><span>|</span>

<li>

<a>用户评价</a>

</li>


< /ul>

</div>

</div>

</div>

<div class="clear" >

;

<!--ヘッダー部分の終わり-->

<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>

</div>

<div class="content-box-right">

<h1>Redmi 6A</h1> ;

< not more ="color: #FF8200;border-bottom: 1px ソリッド #aaa;height: 30px;">599</h2>

<div class=" content-box-map">

;<a href="#" style="color: #FF8200;">変更</a></span><br />

<span><a href="#" style="color: #FF8200;margin-left: 12px;">在庫あり</a></span>

</div>

detail_much_left" style="margin-right: 5px;">4G 64G フルネットコム<span data-val="599">599< /span></div>

<div class ="detail_much_left">6G 64G フル ネットコム<span data-val="699">699</span></div>

</div>

< ;div class="clear"></div>

<div class="content-box-color">

<p>选择颜色</p>

<div class=" content-color-left content-color-left-rls" style="margin-right: 5px;margin-bottom: 5px;"><span style="background:#F6E6D8; "></span>金色</div>

<div class="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 class="clear"></div>

<div class="content- box-bz">

<div class="content-bz-box0">

<p>选择小米提供の安心サービス务</p>

<a href="#">セキュリティ条項</a>

<div class="clear"></div>

< /div>

<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; color: #000;">意外安心服务</p>

<p>手机意外摔落/进水/碾压等损坏</p>

< ;b class="fa fa-check-square content-bz-btn"></b>  我已阅读 <a href="#"> 服务条款 </ a>|<a href="#"> 服务条項 </a>

<span data-val="99">99元</span>

</div>

</div>

</div>

#; content-box-bz "＆gt;

##- circle content-bz-btn"＆gt;＆lt;/span＆gt;

＆lt ;img src="static/images/bz.jpg">

<div class="content -bz-p">

<p style="font-size : 18px; color: #000;">画面割れ保護サービス</p>

< p>携帯電話の画面が誤って割れてしまいました</p>

<b class=" fa fa-check-square content-bz-btn"></b>   <a href="#"> 利用規約 </a>|<aを読みましたhref="#"> 利用規約 </a>

<span data-val="179">179元</span>

< /div＆gt;

#; P＆gt; xiaomi 8 6GB 64GB Black＆lt;/p＆gt;＆lt; span id = "mi-jg"＆gt; 699 yuan＆lt;/span＆gt;＆lt;＆lt;/div＆gt;

<p id="tojg " style="color:#FF6A00;font-size: 25px;margin-left: 30px;">合計 : 699 元</p>

</div>

,, , --circle-o"></i> 7 日間の理由なし返品 & lt;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="detail-img">

<h6>特別な指示</ h6> ;

<img src="static/images/sm.jpg" />

<h6>公式 WeChat</h6>

< img src ="static/images/2.jpg" />

</div>


## <!--Tail--> ;

<div class="フッター">

<div class="フッター">

<div class="for-li"> ;

<a href="#"><i class="fa fa-wrench"> 予約サービス</i><span>|</span> </a>

<a href="#"><i class="fa fa-rotate-right"> 7 日間、質問なし</i><スパン>|</ span></a>

<a href="#"><i class="fa fa-refresh"> 15 日間の無料交換< ;/i><span> |</span></a>

<a href="#"><i class="fa fa-gift">  150 元以上の購入で送料無料< /i><span>|</span></a>

<a href="#"><i class="fa fa-map-marker">  ; 520 以上のアフターセールス販売店</i></a>

</div>

</div>

</div>

<div class="for-li-1">

<div class="for-li-a">

<dl> ;

<dt>ヘルプ センター</dt>

<dd>

<a href="#">アカウント管理</a> ;

</dd>

<dd>

<a href="#">ショッピングガイド</a>

< /dd>

<dd>

<a href="#">注文操作</a>

</dd>

</dl>

<dl>

<dt>サービスサポート</dt>

<dd>

< ;a href="#">アフターセールス ポリシー</a>

</dd>

<dd>

< a href=" #">セルフサービス</a>

</dd>

<dd>

<a href="#" >関連ダウンロード< ;/a>

</dd>

</dl>

<dl>

<dt> ;オフライン ストア</ dt>

<dd>

<a href="#">Xiaomi ホーム</a>

</dd>

<dd>

<a href="#">サービス アウトレット</a>

</dd>

<dd>

<a href="#">認定エクスペリエンス ストア</a>

</dd>

< ;/dl>

< ;dl>

<dt>Xiaomi について</dt>

<dd>

<a href="#">Xiaomi について学ぶ</ a>

</dd>

<dd>

<a href="#"> ;Xiaomi に参加</a>

</dd>

<dd>

<a href="#">投資家情報< /a>

</dd>

</dl>

<dl>

<dt>フォローしてください</ dt>

<dd>

<a href="#">新浪微博</a>

</dd>

<dd>

<a href= "#">公式 Weibo</a>

</dd>

< dd>

<a href="#">お問い合わせ< ;/a>

</dd>

</dl>

<dl>

<dt>専門サービス</ dt>

<dd>

<a href="#">F コード チャネル</a>

</dd>

<dd>

< a href="#">ギフト コード</a>

</dd>

<dd>

<a href="#" >偽造防止クエリ</a>

</dd>

</dl>

<div class="for-conten">

<p class="suorg">Feir-520-1314</p>

<p class="suorg-1">月曜～日曜 8:00～18:00 00<br />(通話料のみ)</p>

<button class="btn"><span class="fa fa-commenting "></span>カスタマー サービスにお問い合わせください</button>

</div>

</div>

</div>

< div クラス="clear"></div>

<div class="for-end">

<div class="end-1" style=" margin-右: 15px;"><img src="static/images/footlogo.png" alt="" /></div>


<div クラス="end-2">

<div class="endli">

<ul>

<li>Xiaomi モール <span> </span></li>

<li>MIUI<span></span></li>

<li>ミジア <span>< ;/span></li>

<li>ミリャオ<span></span></li>

<li> もっと見る<span>< /span></li>

<li>ゲーム<span></span></li>

<li>ルーター<span></span> ;</li>

<li>ミフェンカ<span></span></li>

<li>政府およびエンタープライズサービス<span></ span></li>

<li>Xiaomi Tmall ストア<span></span></li>

<li>プライバシー ポリシー<span>< /span></li>

<li>フィードバック<span></span></li>

<li>地域の選択</li>

</ul>

</div>

<div class="endli-p">

<a href="#">©mi.com</a>

京ICP 証明書番号 110507

<a href="#">北京 ICP 番号 10046444</a>

<a href="#">北京公安ネットワークNo. 11010802020134</a>

<a href="#">Jingwangwen [2014] No. 0059-0009</a>

</a>

<br> 違法および有害な情報を報告するためのホットラインは 185-0130-1238 です。特に明記されていない限り、この Web サイトに掲載されているデータはすべて当社の臨床検査によるものです。

< / 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-right: 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">ブラック テクノロジーを探索しましょう。Xiaomi は熱狂のために生まれました。 </div>

</div>

</body>


##<script>

layui.use('carousel', function(){

var carousel =layui.carousel;

//インスタンスを構築

carousel.render({

elem: '#test1'

,width: '560px' //コンテナの幅を設定します

,height:'600px'

,arrow: 'always' //矢印を常に表示します

// , anim: 'updown' //アニメーション モードを切り替えます

});

});

</script>

<script>

//デフォルトの最初のバージョン クラス名を置き換える メソッド

$(document).ready(function(){

//クラス eq traversal (0) を 0 から取得(最初のものを表す) クラス名を .content-box-bb rls

$(".detail_much_left").eq(0).attr("class",".detail_much_left rls")# に置き換えます。

## $(".content-color-left").eq(0).attr("class",".content-color-left rls")

/ /選択したバージョンをクリックします

$(".detail_much_left").click(function(){

$(".detail_much_left").attr("class",".detail_much_left") )

$(this).attr("class",".detail_much_left rls")

})

//クリックして色を切り替えます

$(".content-color-left").click(function(){

$(".content-color-left").attr("class",". content-color-left")

$(this).attr("class",".content-color-left rls")

})

##})

</script>

</html>

TimeTime2152日前1548

全員に返信(4)返信します

  • 灭绝师太

    灭绝师太2019-01-08 10:40:21

    あなたの書き方の問題は attr("class","no pigios before the class name"); これは非常に細かい点ですので、注意してください

    返事
    1
    • Time

    どうもありがとう！

    — Time · 2019-01-08 10:41:26
  • Time

    Time2019-01-08 10:36:37

    解決しました

    返事
    0
  • キャンセル返事