Hello teacher, please help. I made an error when selecting the version and color. When I select the second one, the default option color does not return to the original color.-PHP Chinese Network Q&A

<!DOCTYPE html>

<html>

<head>

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

<style>

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

/*头*/

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

.header-lr-box{width: 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{color: #23262E;font-size: 14px;font-weight: none;}

.header-right{float: right;}

.header-right li{float: left; width: 70px;height: 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: bold;margin: 10px auto;float: left;}

/*主要内容*/

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

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

.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;line-height: 50px;padding: 0px 20px;}

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

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

.content-box-color p{font-size: 18px; color: #333; margin: 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;}

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

.content-bz-box0 p{float: left;font-size: 18px; color: #333;margin: 20px 0px;}

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

.content-bz-box1{width: 598px;height: 150px;border: 1px solid #ccc;}

.content-bz-box1 span{float: 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 span{float: right;margin: 0px;margin-right:20px; color: #ccc;width: 50px;}

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

.content-zs{width: 100%; height: 130px;background: #f9f9f9;margin-top: 30px;}

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

.content-zs p {float: left;}

.content-zs span{float: right;line-height: 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;background: #FF5722;color: #FFF; }

</style>

</head>

<body>

<li>

<li>

<li>

<li>

<li>

<a href="#">小爱分享平台</a><span>|</span></li>

<li>

<li>

<li>

<li>

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

</li>

</ul>

<ul>

<li>

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

<li>

<a href="#">Register</a><span> ;|</span></li>

<li>

<a href="#">My Order</a>

</li>

<a><i class="fa fa-shopping-cart"> Shopping cart(0)</i></a>

<div>There are no items in the shopping cart yet, hurry up and buy now! </div>

</li>

</ul>

</div>

# # <div class="content">

</div>

<li>Xiaomi mobile phone

< div class="mi-boxdiv">

<div class="mi-new">New Product</ div>

<br />

<a href="#">Xiaomi 2s</a>

<br />

</div>

<div class="mi-new">New Products</ div>

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

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

</li>

</ul>

</div>

< ;div class="content-box-left">

</div>

< /div>

</div>

<h1>Redmi 6A</h1> ;

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

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

<span><a href="#" style="color: #FF8200;margin-left: 12px;">In stock</a></span>

</div>

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

<div class ="detail_much_left">6G 64G Full Netcom<span data-val="699">699</span></div>

</div>

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

</div>

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

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

</div>

<p style="font-size: 18px; color: #000;">意外保障服务</p>

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

</div>

; content-box-bz">

-circle content-bz-btn"></span>

<p style="font-size: 18px; color: #000;">Broken Screen Protection Service</p>

< p>The phone screen accidentally broke</p>

<b class="fa fa-check-square content-bz-btn"></b> I have read < ;a href="#"> Terms of Service </a>|<a href="#"> Terms of Service </a>

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

</div>

;p>Xiaomi 8 6GB 64GB Black</p><span id="mi-jg">699 yuan</span></div>

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

</div>

,, , -circle-o"></i> 7 days for no reason return <i class="fa fa-check-circle-o"></i> 15 days for quality issues Goods <i class="fa fa-check-circle-o"></i> 365-day warranty</p>

</ div>

</div>

<h6>Special Instructions</ h6>

<h6>Official WeChat</h6>

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

</div>

##  ;

<div class="for-li"> ;

<a href="#"><i class="fa fa-wrench"> Reservation Service</i><span>|</span> </a>

<a href="#"><i class="fa fa-rotate-right"> 7 days no questions asked</i>< span>|</span></a>

<a href="#"><i class="fa fa-refresh"> 15 days free exchange< ;/i><span>|</span></a>

<a href="#"><i class="fa fa-gift"> Free shipping for purchases over 150 yuan</i><span>|</span></a>

<a href="#"><i class="fa fa- map-marker"> More than 520 after-sales outlets</i></a>

</div>

<dl> ;

<dt>Help Center</dt>

<dd>

<a href="#">Account Management</a> ;

</dd>

<dd>

<a href="#">Shopping Guide</a>

</dd>

<dd>

<a href="#">Order Operations</a>

</dd>

</dl>

<dl>

<dt>Service Support</dt>

<dd>

<a href="#">After-sales policy</a>

</dd>

<dd>

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

</dd>

<dd>

<a href="#" >Related downloads</a>

</dd>

</dl>

<dl>

<dt> ;Offline stores</dt>

<dd>

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

< ;/dd>

<dd>

<a href="#">Service Outlet</a>

</dd>

<dd>

<a href="#">Authorized Experience Store</a>

</dd>

< ;/dl>

<dl>

<dt>About Xiaomi</dt>

<dd>

<a href="#">Learn about Xiaomi</a>

</dd>

<dd>

<a href="#"> ;Join Xiaomi</a>

</dd>

<dd>

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

</dd>

</dl>

<dl>

<dt>Follow us</ dt>

<dd>

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

</dd>

<dd>

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

</dd>

< dd>

<a href="#">Contact us</a>

</dd>

</dl>

<dl>

<dt>Specialized Services</dt>

<dd>

<a href="#">F code channel</a>

</dd>

<dd>

< a href="#">Gift code</a>

</dd>

<dd>

<a href="#" >Anti-counterfeiting query</a>

</dd>

</dl>

<p class="suorg-1">Monday to Sunday 8:00- 18:00<br />(Call charges only)</p>

<button class="btn"><span class="fa fa-commenting "></ span> Contact customer service</button>

</div>

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

# <div class="end-2">

<ul>

<li>Xiaomi Mall <span></span></li>

<li>Mijia <span></span></li>

<li>Miliao<span></span></li>

<li>Games<span></span></li>

<li> ;Router<span></span></li>

<li>Mifenka<span></span></li>

< li>Government and Enterprise Services<span></span></li>

<li>Xiaomi Tmall Store<span></span></li>

<li>Privacy Policy<span></span></li>

<li>Feedback<span></span></li>

<li>Select Region</li>

</ul>

</div>

京ICP Certificate No. 110507

<a href="#">Beijing ICP No. 10046444</a>

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

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

</a>

<br> The hotline for reporting illegal and harmful information is: 185-0130-1238. The data listed on this website, unless otherwise specified, are all from our company’s laboratory testing

< /div>

</div>

</div>

< ;div class="font">Explore black technology, Xiaomi is born for fever! </div>

</div>

</body>

##<script>

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

var carousel = layui.carousel;

//Build instance

carousel.render({

elem: '#test1'

,width: '560px' //Set the container width

,height:'600px'

,arrow: 'always' //Always display the arrow

//, anim: 'updown' //Switch animation mode

});

</script>

//Default first version Replace class name method

$(document).ready(function(){

//Get class eq traversal (0) starting from 0 (Representing the first one) Replace the class name with .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")

/ /Click the selected version

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

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

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

})

//Click to switch colors

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

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

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

})

</script>

</html>

reply all(2)

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

There is a problem with your writing method, attr("class", "There is no dot before the class name"); this is a very small detail, please pay attention to it

Like +1

Add Reply

reply Many thanks!

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

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

solved

Like +0