Bonjour professeur, aidez-moi s'il vous plaît. J'ai fait une erreur lors de la sélection de la version et de la couleur. Lorsque je sélectionne la deuxième, la couleur de l'option par défaut ne revient pas à la couleur d'origine.-Questions et réponses sur le réseau chinois PHP

<!DOCTYPE html>

<html>

<head>

<title>红米6A立即购买—小米商城</title>

<style>

*{padding: 0;margin: 0;list-style: none;text-decoration: none;}

/*头*/

.header-lr{largeur : 100 % ; hauteur : 50 px ; box-shadow : 0px 10px 10px #ccc;margin-top : 10px;border-top : 2px solid #ccc;}

.header-lr-box{largeur : 1226px; hauteur : 50px;marge: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 ; largeur : 70 px ; hauteur : 50 px; couleur : #aaa ; taille de police : 12 px ;}

.detail-img{largeur : 1226px; marge : 0 auto ;}

.detail-img h6{taille de police : 16px ; poids de police : gras ; marge : 10px auto;float: left;}

/*主要内容*/

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

.content-box-left{width: 560px; hauteur : 600px;float : gauche;}

.content-box-right{width: 600px;float: right;}

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

.content-box-map{largeur : 100 %;hauteur : 100 px;arrière-plan : /*rgba(51,51,51,0.2)*/#fafafa;marge : 20 px auto ;bordure : 1px solide #ccc;}

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

.content-box-map i{position : relative;gauche : 12px;}

.content -box-money .rls{border: 1px solid #FF8200;}

.content-box-money div{largeur: 255px;hauteur: 50px;text-align: center;float: left;border: 1px solid #ccc; hauteur de ligne : 50 px ; remplissage : 0px 20px ;}

.content-box-money span{float : right;color : #ccc;}

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

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

.content-box-color div{width:255px ; hauteur : 50 px ; flotteur : gauche ; rembourrage : 0px 20px ; alignement du texte : centre ; hauteur de la ligne : 50 px ; bordure : 1px solide #ccc ;}

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

.content-bz-box0 p{float: left; taille de police : 18 px ; couleur : #333;marge : 20px 0px;}

.content-bz-box0 a{float : right;font-size : 14px; marge : 20px 0px ; couleur : #ff8200 ;}

.content-bz-box1{largeur : 598px;hauteur : 150px;bordure : 1px solide #ccc;}

.content-bz-box1 span{float : gauche;largeur : 10px;hauteur : 10px;hauteur de ligne: 10px;radius de bordure: 6px;affichage: bloc en ligne;marge: 60px auto;marge-gauche: 40px;}

.content-bz-box1 img{float: left;margin: 50px 20px;}

.content-bz-p{marge : 40px auto;}

.content-bz-p p{marge : 10px auto;}

.content-bz-p span{float : right;margin : 0px;marge droite:20px; couleur : #ccc;largeur : 50px;}

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

.content-zs{largeur : 100 % ; hauteur : 130px;arrière-plan : #f9f9f9;marge supérieure : 30px;}

.content-zs div{marge : 0px 30px 20px;hauteur : 50px; hauteur de ligne : 30 px ; }

.content-zs p {float : gauche ;}

.content-zs span{float : droite ; hauteur de ligne : 50px;}

.content-box-color .rls{border : 1px solid #FF8200;}

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

.shop-che{width: 240px;height: 50px;text-align: center;line-height : 50px;arrière-plan : #FF5722;couleur : #FFF; }

</style>

</head>

<body>

<div class="menu"> ;

<li>

<li>

<li>

<li>

<li>

<li>

<li>

<li>

<li>

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

</li>

</ul>

<ul>

<li>

<li>

<li>

</li>

<div>购物车中还没有商品，赶紧选购吧！</div>

</li>

</ ul>

</div>

</div>

<li>小米手机

< div class="mi-box1">

<br />

<br />

</div>

<br />

<br />

</div>

<br />

<br />

</div>

<br />

<br />

</div>

</div>

</li>

<li>红米

<br />

<br />

</div>

< div class="mi-shop">

<br />

<br />

</div>

<br />

<br />

</div>

<br /> ;

<br />

</div>

</div>

</li> ;

<li>路由器

<br />

<br />

</div>

<br />

<br />

</div>

<br />

<br />

</div>

<br />

<br />

</div>

</div>

</li>

</ ul>

</div>

</form>

</div>

<ul>

<li>

</li>

<li>

</li>

</ul>

</ div>

<ul>

<li>

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

<li>

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

<li>

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

<li>

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

<li>

<a> ul> ;

</div>

< ;div class="layui-carousel" id="test1">

</div>

</div> Processeur / Plein écran compact de 5,45" / Caméra haute définition de 13 millions / Corps "Petite taille en saule"</p>

30px;">599</h2>

" " <envergure> ;Pékin Ville de Pékin District de Dongcheng Rue Yongdingmenwai <a href="#" style="color: #FF8200;">Modifier</a></span> ;<br />

<div class="detail_much_left" style= "margin-right:">4G +64G Full Netcom<span data-val="599">599</span></div>

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

;

</div>

<p>选择小米提供的保障服务< /p>

<a href="#">了解保障条款</a>

</div&g t;

< ;div class="content-bz-box1">

<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= "#"> ;

</div>

<div class="content-bz-box1"> / images/bz.jpg">

<p style= "font-size: 18px; color: #000;">Service de protection d'écran cassé</p>

<p>L'écran du téléphone s'est accidentellement cassé</p>

<b class="fa fa-check -square content-bz-btn"></b> J'ai lu <a href="#"> Conditions d'utilisation </a>|<a href="# "> Conditions d'utilisation </a>

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

</div>

" ></div> ;

jg"</span> ;</div>

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

;p>< ;i class="fa fa-check-circle-o"> ;</i> 7 jours sans poser de questions < i class="fa fa-check-circle-o"></ i> Remplacement sous 15 jours en cas de problèmes de qualité <i class="fa fa-check-circle-o"></ i> Garantie de 365 jours</p>

/div>

</div>

<h6>Instructions spéciales</h6>

<h6>WeChat officiel</h6>

</div>

<div class="for-li"> ;

<a href="#"><i class="fa fa-wrench"> Réserver un service de réparation</i><span>|</span></a> ;

<a href="#"><i class="fa fa-rotate-right"> 7 jours sans poser de questions</i><span>|</span> a>

<a href="#"><i class="fa fa-refresh"> 15 jours d'échange gratuit</i><span>|</ span></ a>

<a href="#"><i class="fa fa-gift"> Livraison gratuite</i><span>|< ;/span></a>

<a href="#"><i class="fa fa-map-marker"> Plus de 520 points de vente</i>< /a>

</ div>

</div>

<dl>

<dt>Centre d'aide</ dt> ;

<dd>

<a href="#">Gestion de compte</a>

</dd>

<dd>

<a href="#" > Guide d'achat</a>

</dd>

<dd>

<a href="#">Opérations de commande</a>

</dd>

</dl >

</dd>

<dd>

<a href="#">Libre-service</a>

</dd>

<dd>

<a href ="#">Téléchargements associés</a>

</dd>

</dl>

<dl>

<dt>Boutiques hors ligne</dt>

<dd> ;

<a href="#">Xiaomi Home</a>

</dd>

<dd>

<a href="#">Points de service </a> ;

</dd>

<dd>

<a href="#">Magasin d'expérience agréé</a>

</dd>

</ dl>

< ;dl>

<dt> ;

<a href="# ">Relations investisseurs</a>

</dd>

</dl>

<dl>

<dt>Suivez-nous</dt> ;

<dd>

<a href="#">Sina Weibo</a>

</dd>

<dd>

<a href="#"> Weibo officiel< /a>

</dd>

<dd>

<a href="#">Contactez-nous</a>

</dd>

</dl> ;

<dl>

<dt>Services spécialisés</dt>

<dd>

</dd>

<dd>

<a href="#">礼物码</a> ;

</dd>

<dd>

</dd>

</dl>

< ;div class="for-conten">

<p class="suorg-1">周一至周日8h00-18h00<br />(仅收市话费)</p>

</div>

<ul>

<li>店< ; span & gt; & lt; / span & gt; & lt; / li & gt;

& lt; li & gt; 隐私政策 & lt; span & gt; & lt; / span & gt; & lt; / li & gt;

& lt; li & gt; 问题反馈 & lt; span & gt; & lt; / / span></li>

<li>Sélectionner la région</li>

</ul>

</div>

Certificat ICP de Pékin n° 110507

<a href= " #">ICP de Pékin n° 10046444</a>

<a href="#">Sécurité du réseau public de Pékin n° 11010802020134</a>

</a>

<br> Hotline de signalement d'informations illégales et préjudiciables : 185-0130-1238, les données répertoriées sur ce site Web, sauf indication contraire, toutes les données proviennent de nos tests en laboratoire

</div>

</div>

<div class="font">Explorez la technologie noire, Xiaomi est née pour la fièvre ! </div>

</div>

</body>

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

var carousel = layui.carousel;

//Construire une instance

carrousel. render({

elem: '#test1'

,width: '560px' //Définir la largeur du conteneur

,height:'600px'

,arrow: 'always' //Toujours afficher la flèche

/ /, anim: 'updown' //Changer de mode d'animation

});

</script>

//Première version par défaut Remplacer la méthode du nom de classe

$( document ).ready(function(){

//Obtenez le parcours d'équation de classe (0) à partir de 0 (représentant le premier) et remplacez le nom de la classe par .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" )

//Cliquez sur la version sélectionnée

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

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

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

})

//Cliquez pour changer de couleur

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

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

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

})

</script>

</html>

répondre à tous(2)

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

Il y a un problème avec votre méthode d'écriture, attr("class","Il ne devrait y avoir aucun point avant le nom de la classe"); c'est un tout petit détail, veuillez y prêter attention

Comme +1

Ajouter une réponse

répondre Merci beaucoup!

Time auteur 2019-01-08 10:41:26

Time2019-01-08 10:36:37 1 plancher

Résolu

Comme +0