jQuery商品属性选择的实现
类别:Web前端 浏览量:2201
时间:2015-5-17 jQuery商品属性选择的实现
jQuery商品属性选择的实现一、效果图
二、右下角图片
三、实现代码
<html>
<head>
<style>
.yListr {
width: 690px;
font-family: "微软雅黑";
margin: 46px auto 0 auto;
}
.yListr ul {
border-bottom: 1px solid #dcdcdc;
padding-bottom: 10px;
margin-bottom: 13px;
}
.yListr ul li {
height: 36px;
margin-bottom: 23px;
}
.yListr ul li span {
color: #000000;
font-size: 14px;
line-height: 36px;
display: inline-block;
width: 42px;
padding-left: 4px;
}
.yListr ul li em {
cursor: pointer;
color: #666666;
font-size: 14px;
display: inline-block;
padding: 0 10px;
font-style: normal;
border: 1px solid #dcdcdc;
line-height: 34px;
height: 34px;
}
.yListr ul li em.yListrclickem {
line-height: 32px;
border: 2px solid #e9630a;
height: 32px;
position: relative;
padding: 0 9px;
}
.yListr ul li em.yListrclickem i {
display: block;
width: 15px;
height: 14px;
background: url(righbt.png) no-repeat 0 0;
right: -1px;
bottom: -1px;
position: absolute;
}
.yListr .colorp00 {
color: #333333;
font-size: 18px;
line-height: 50px;
}
.yListr .colorp00 span {
color: #ed610c;
font-size: 14px;
padding-left: 20px;
}
.yListr .colorp00 em {
font-style: normal;
}
.yListr form input, .yListr form select {
outline: none;
border: 1px solid #dcdcdc;
width: 86px;
height: 34px;
font-size: 14px;
color: #333333;
padding-left: 8px;
}
.yListr form select {
height: 36px;
}
.yListr form .YImmediatelyininstallment {
font-size: 24px;
color: #ffffff;
text-align: center;
display: block;
width: 332px;
height: 50px;
line-height: 50px;
border-radius: 3px;
background: #e9630a;
margin-top: 42px;
}
</style>
</head>
<body>
<li>
<li>
<li class="yListr">
<ul>
<li><span>颜色</span> <em class="yListrclickem">深灰色<i></i></em> <em>金色<i></i></em> <em>银色<i></i></em> </li>
<li><span>内存</span> <em class="yListrclickem">16G ROM<i></i></em> </li>
<li><span>尺寸</span> <em class="yListrclickem">5.5寸<i></i></em> </li>
<li><span>尺寸</span> <em class="yListrclickem">港版(二网)<i></i></em> <em>类型<i></i></em>
</li>
</ul>
</li>
</li>
</li>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".yListr ul li em").click(function() {
$(this).addClass("yListrclickem").siblings().removeClass("yListrclickem");
})
})
</script>
</body>
</html>
标签:jquery
您可能感兴趣
- jquery 选择器的用法
- jquery中find()与filter()的区别
- JQuery中extend的用法
- jquery on绑定hover
- jquery中wrap、wrapAll、wrapInner
- jquery插件开发
- jquery解析xml
- jquery中change()
- jQuery里$(this)和this的区别有哪些
- jquery留言板代码(JavaScript实现留言板添加删除留言)
- jQuery商品属性选择的实现
- jqueryajax实现部分刷新(php+jQuery ajax实现的实时刷新显示数据功能示例)
- javascript中还原append代码(JS实现jQuery的append功能)
- jquery插件写法
- jquery中return this.each的作用
- jquery实现聚光灯效果
- 泰剧《爱欲之神》Boom kitkong和Great合体杂志(泰剧爱欲之神Boomkitkong和Great合体杂志)
- 素人恋爱综艺火药味十足 男生为赢得芳心集体扯头花,真是出好戏(素人恋爱综艺火药味十足)
- 《囧妈》为何受抵制 春节七部影片撤档背后的责任与博弈(囧妈为何受抵制)
- 提醒 2019年起河南驾考要开设科目五 官方回应来了(2019年起河南驾考要开设科目五)
- 省 市书法家协会 送万福进万家 活动走进禹州美丽乡村(省市书法家协会)
- 点赞 禹州苌庄正式撤乡建镇 未来发展不可估量(禹州苌庄正式撤乡建镇)
热门推荐
- Linq中select查询
- $.ajax的用法
- laravel检查关联模型(Laravel 关联模型-关联新增和关联更新的方法)
- pythonmatplotlib散点图怎么画(python使用matplotlib画柱状图、散点图)
- python解析csv文件存到数据库(python读取csv和txt数据转换成向量的实例)
- php redis应用场景(PHP商品秒杀问题解决方案实例详解mysql与redis)
- windows服务器安装宝塔面板(云服务器无法安装宝塔面板及软件解决方案)
- sqlcount函数转化为数值型(SQL判断是否"存在",还在用 count 操作?很耗时的!)
- select 1 from 的作用
- opencv 图像匹配python(OpenCV+Python识别车牌和字符分割的实现)