찾다

집  >  Q&A  >  본문

안녕하세요 선생님 도와주세요 버전 및 색상 선택 시 오류가 발생했습니다. 두 번째 선택 시 기본 옵션 색상이 원래 색상으로 돌아가지 않습니다.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<link rel="stylesheet" href="static/css/ 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立即购买—작은/제목>

<style>

*{패딩: 0;여백: 0;목록-스타일: 없음;텍스트-장식: 없음;}

/*头*/

.header-lr{너비:100%;높이: 50px; 상자 그림자: 0px 10px 10px #ccc;여백 상단: 10px;국경 상단: 2px 단색 #ccc;}

.header-lr-box{너비: 1226px; height: 50px;margin:0 auto;}

.header-lefts li{width:70px;height: 50px;float: left;text-align: center;line-height: 50px;}

.header-lefts li a{색상: #23262E;글꼴 크기: 14px;글꼴 무게: 없음;}

.header-right{float: 오른쪽;}

.header-right li{float: 왼쪽; 너비: 70px;높이: 50px;줄 높이: 50px;텍스트 정렬: 중앙;}

.header-오른쪽 범위{float: 왼쪽;줄 높이: 50px; 색상: #aaa;글꼴 크기: 12px;}

.detail-img{너비: 1226px;여백: 0 자동;}

.detail-img h6{글꼴 크기: 16px;글꼴 무게: 굵게;여백 : 10px auto;float: left;}

/*主要内容*/

.content-box{width: 1226px;margin: 30px auto;}

.content-box-left{width: 560px; 높이: 600px;float: 왼쪽;}

.content-box-right{너비: 600px;float: 오른쪽;}

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

.content-box-map{너비: 100%; 높이: 100px;배경: /*rgba(51,51,51,0.2)*/#fafafa;여백: 20px 자동;테두리: 1px 단색 #ccc;}

.content-box-map 범위{디스플레이: inline-block;margin-top: 10px;margin-left: 15px;}

.content-box-map i{위치: 상대;왼쪽: 12px;}

.content -box-money .rls{테두리: 1px 솔리드 #FF8200;}

.content-box-money div{너비: 255px;높이: 50px;text-align: 센터;플로트: 왼쪽;테두리: 1px 솔리드 #ccc; 줄 높이: 50px;패딩: 0px 20px;}

.content-box-money 범위{float: 오른쪽;색상: #ccc;}

.content-box-money p{글꼴 크기: 18px;색상: #333;여백: 15px 0px;}

.content-box-color p{글꼴 크기: 18px; 색상: #333; 여백: 15px 자동;}

.content-box-color div{너비:255px ; 높이:50px ;float: 왼쪽;패딩:0px 20px;text-align: center;line-height: 50px;border:1px solid #ccc;}

.content-box-color 범위{display:inline-block;height: 16px;width: 16px;border-radius: 8px;margin-right: 10px;}

.content-bz-box0 p{float: left; 글꼴 크기: 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 스팬{플로트: 왼쪽;너비: 10px;높이 : 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{마진: 40px 자동;}

.content-bz-p p{마진: 10px 자동;}

.content-bz-p 스팬{float: 오른쪽;마진: 0px;여백-오른쪽:20px; 색상: #ccc;너비: 50px;}

.content-bz-btn{color:rgba(0,0,0,0);border: 1px 단색 #ccc;}

.content-zs{너비: 100 %; 높이: 130px;배경: #f9f9f9;margin-top: 30px;}

.content-zs div{margin: 0px 30px 20px;height: 50px; 줄 높이: 30px; }

.content-zs p {float: 왼쪽;}

.content-zs 범위{float: 오른쪽;line-height: 50px;}


.content-box-color .rls{테두리: 1px 단색 #FF8200;}

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

.shop-che{너비: 240px;높이: 50px;text-align: 중앙;줄 높이 : 50px;배경: #FF5722;색상: #FFF; }



</style>

</head>

<body>

<div class="header">

<div class="menu"> ;

<ul class="menu-left">

<li>

<a href="#">작은米商城</a><span>|</span>

  • <span>|

    <li>

    <a href="#">IOT</a><span>|</span></li>

    <li>

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

    <li>

    <a href="#">小爱分享平台</a>< 스팬>|</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 class="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>购物车中还没有商product，赶紧选购吧！</div>

    </li>

    </ ul>

    </div>

    </div>

    </div>

    <div class="contents" 스타일="배경: #F6F6F6;;">


    <div class="content">

    <div class="contentMenu">

    <div class="contentMenu-imgbox">

    <img src="static/images/footlogo. png" 스타일="마진: 3px 5px;마진-오른쪽: 10px;" />

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

    </div>

    <!--下拉newproductN-->

    <ul class= "contentMenu-ul">


    <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="#">small米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="#">small米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원

    • ;

    <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">신상품</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="#">small米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="#">small米2s</a>

    <br />

    <a href="#" style= " 색상: #FF8200;">3299원</a>

    </div>

    </div>

    <span></span>

    </div>

    </div>

    </li>

    <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="#">small米电视</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>small米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>

    |

  • 용户评价


    • ;

    </div>

    </div>

    </div>

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

    <!--헤더 부분 끝-->

    <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> 프로세서 / 5.45인치 컴팩트 풀 스크린 / 1,300만 화소 고화질 카메라 / "작은 버드나무 허리" 바디</p>

                                                               >                                      ;">599</h2>

    " " < 스팬>베이징 베이징시 둥청 구 용딩먼와이 거리 <a href="#" style="color: #FF8200;">수정</a></span> ;<br />

    # gt;4G+64G 전체 Netcom<span data-val="599">599</span></div>

    +64G 전체 Netcom<span data-val="699">699</span></div>

                                                                                                                ;

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

            <p>选择颜color</p>

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

            <div 클래스 ="content-color-left"><span  style="배경:#3C3F43;"></span>深灰</div>

            <div class="content-color-left" style="margin-right: 5px;"><span  style="배경:#D93239;"></span>亮红</div>

            <div class="content-color- 왼쪽"><span  style="배경:#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>Hand机意외摔落/进水/碾压等损坏</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>

                                                                             

    <div class="content-bz-box1"> /image s/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>

                                                                                            " > jg">699 위안</span></div>

                <p id="tojg" style="color:#FF6A00;font-size: 25px;margin-left: 30px;">총액  ： 699 위안</p>

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

    <!--Description-->

    <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="footers">

    <div class="footer">

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

    <a href="#"><i class="fa fa-refresh"> 15일 무료 교환</i><span>|</span></ a>

    <a href="#"><i class="fa fa-gift"> 무료 배송</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 >

    </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 정보 /dd>

    <dd>

    <a href="#">Xiaomi 가입</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="#">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<br />(仅收市话费)</p>

    <button class="btn"><span class="fa fa-commenting "></ 스팬> 联系客服</button>

    </div>

    </div>

    </div>

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

    <div class="for-end">

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


    <div class="end-2">

    <div class="endli">

    <ul>

    <li>小米商city<span></span></li>

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

    <li>米family<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>small米天猫店< ;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= " #">Beijing ICP No. 10046444</a>

    <a href="#">Beijing Public Network Security No. 11010802020134</a>

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

    </a>

    <br> 불법유해정보 신고전화 : 185-0130-1238, 본 사이트에 기재된 자료는 별도의 규정이 없는 한 모두 데이터는 실험실 테스트에서 가져온 것입니다

    </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는 열기를 위해 태어났습니다!

    ;

    </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(){

    //0(첫 번째 항목을 나타냄)부터 시작하는 클래스 eq traversal (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일 전1549

    모든 응답(4)나는 대답할 것이다

  • 灭绝师太

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

    작성 방법에 문제가 있습니다. attr("class","클래스 이름 앞에 마침표가 없어야 합니다.") 아주 사소한 부분이니 주의해주세요

    회신하다
    1
    • Time

    정말 감사합니다!

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

    Time2019-01-08 10:36:37

    해결됨

    회신하다
    0
  • 취소회신하다