文章详情页

老师你好请求帮助在选择版本和颜色出错选择第二个的时候默认选项颜色不恢复原来的颜色

更多 QQ空间微信 QQ好友腾讯朋友复制链接

【字号：大中小】日期：2024-05-21 14:40:17浏览：26作者：猪猪

问题描述

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

<li>

<li>

</li>

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

</li>

</ul>

</div>

</div>

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

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

<p>12nm高性能处理器 / 5.45" 小巧全面屏 / 1300万高清相机 / “小杨柳腰”机身</p>

<span>北京 北京市 东城区 永定门外街道 <a href="#" style="color: #FF8200;">修改</a></span><br />

</div>

</div>

</div>

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

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

</div>

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

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

</div>

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

<p>手机意外碎屏</p>

</div>

</div>

<div class="shop-che">加入购物车</div>

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

<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-map-marker"> 520余家售后网点</i></a>

</div>

<dl>

<dd>

</dd>

<dd>

</dd>

<dd>

</dd>

</dl>

<dl>

<dd>

</dd>

<dd>

</dd>

<dd>

</dd>

</dl>

<dl>

<dd>

</dd>

<dd>

</dd>

<dd>

<a href="#">授权体验店</a>

</dd>

</dl>

<dl>

<dd>

</dd>

<dd>

</dd>

<dd>

<a href="#">投资者关系</a>

</dd>

</dl>

<dl>

<dd>

</dd>

<dd>

</dd>

<dd>

</dd>

</dl>

<dl>

<dd>

</dd>

<dd>

</dd>

<dd>

</dd>

</dl>

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

</div>

<ul>

<li>小米天猫店<span></span></li>

<li>Select Region</li>

</ul>

</div>

京ICP证110507号

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

<a href="#">京公网安备11010802020134号</a>

</a>

<br> 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试

</div>

</div>

<div class="font">探索黑科技，小米为发烧而生！ </div>

</div>

</body>

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

var carousel = layui.carousel;

//建造实例

carousel.render({

elem: '#test1'

,width: '560px' //设置容器宽度

,height:'600px'

,arrow: 'always' //始终显示箭头

//,anim: 'updown' //切换动画方式

});

</script>

//默认第一版本替换class名方法

$(document).ready(function(){

//获取class eq遍历（0）从0开始（代表第一个）替换class名为.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>

问题解答

回答1：

你的写法问题，attr("class","class名前面不到带点号")；这是个很小的细节哦，要注意

回答2：

已解决

上一条：href src url 三者区别下一条：实战布局（1）不能显示图片

相关文章：

1. 引用 node.js express加载静态文件　报错 ??2. javascript - 引入 simditor，但是显示标签，这个怎么解决。3. angular.js - 全站用的angular，但是像下面描述的这样强交互的功能用angular该用什么思路去做呢？4. angular.js - 如何让图片遇到父容器边缘自动换行显示，不会溢出5. angular.js - 关于ui-sref地址栏缺省的问题6. angular.js - 在angular中，使用ng-repeat循环输出一个列表，然后节当中具体的一个参数值（是数值），然后整个循环节的值总数相加7. angular.js - 用ng serve运行一个angular2的项目，结果出错，运行不了？有没有朋友遇到过，告知一下怎么运行起来。8. android - 目前有哪些用Vue.js开发移动App的方案？9. angular.js - 学习ng路由模块遇到点击链接到锚点时URL后面多出个#!是怎么回事10. mysql - 这条sql可以怎么优化，求帮助

排行榜

					
					引用 node.js  express加载 静态文件　报错 ??
javascript - 引入 simditor，但是显示标签，这个怎么解决。
android - 目前有哪些用Vue.js开发移动App的方案？
angular.js - 关于ui-sref地址栏缺省的问题
angular.js - 学习ng路由模块遇到点击链接到锚点时URL后面多出个#!是怎么回事
angular.js - 用ng serve运行一个angular2的项目，结果出错，运行不了？有没有朋友遇到过，告知一下怎么运行起来。
angular.js - 如何让图片遇到父容器边缘自动换行显示，不会溢出
angular.js - 在angular中，使用ng-repeat循环输出一个列表，然后节当中具体的一个参数值（是数值），然后整个循环节的值总数相加
angular.js - 全站用的angular，但是像下面描述的这样强交互的功能用angular该用什么思路去做呢？
android - 如何实现collaspingtablayout中放一张图，下面跟着tablayout，下滑的时候先收缩图片，然后下滑隐藏tool
网页爬虫 - python爬虫翻页问题，请问各位大神我这段代码怎样翻页，还有价格要登陆后才能看到，应该怎么解决
				

热门标签

老师你好 请求帮助 在选择版本和颜色出错 选择第二个的时候默认选项颜色不恢复原来的颜色

老师你好请求帮助在选择版本和颜色出错选择第二个的时候默认选项颜色不恢复原来的颜色