web前端入门到实战：制作仿京东商城-商品列表商品筛选功能

2024-11-16 技术教程

这次实现一个仿京东商城-商品列表商品筛选的功能

一、html代码

<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"></head><body><div class='container'> <div class='filter'> <span>已选条件：</span> <div class='itme'>  </div> </div> <div class='store'> <dl> <dt>品牌：</dt> <dd><div><a>全部</a></div></dd> <dd><div><a>惠普(hp)</a></div></dd> <dd><div><a>联想(Lenovo)</a></div></dd> <dd><div><a>联想(ThinkPad)</a></div></dd> <dd><div><a>宏基(acer)</a></div></dd> <dd><div><a>华硕</a></div></dd> <dd><div><a>戴尔</a></div></dd> <dd><div><a>三星</a></div></dd> <dd><div><a>索尼</a></div></dd> <dd><div><a>东芝</a></div></dd> <dd><div><a>Gateway</a></div></dd> <dd><div><a>微星</a></div></dd> <dd><div><a>海尔</a></div></dd> <dd><div><a>清华同方</a></div></dd> <dd><div><a>富士通</a></div></dd> <dd><div><a>苹果(Apple)</a></div></dd> <dd><div><a>神舟</a></div></dd> <dd><div><a>方正</a></div></dd> <dd><div><a>优雅</a></div></dd> </dl> <dl> <dt>价格：</dt> <dd><div><a>全部</a></div></dd> <dd><div><a>1000-2999</a></div></dd> <dd><div><a>3000-3499</a></div></dd> <dd><div><a>3500-3999</a></div></dd> <dd><div><a>4000-4499</a></div></dd> <dd><div><a>4500-4999</a></div></dd> <dd><div><a>5000-5999</a></div></dd> <dd><div><a>6000-6999</a></div></dd> <dd><div><a>7000-9999</a></div></dd> <dd><div><a>10000以上</a></div></dd> </dl> <dl> <dt>尺寸：</dt> <dd><div><a>全部</a></div></dd> <dd><div><a>8.9英寸及以下</a></div></dd> <dd><div><a>11英寸</a></div></dd> <dd><div><a>12英寸</a></div></dd> <dd><div><a>13英寸</a></div></dd> <dd><div><a>14英寸</a></div></dd> <dd><div><a>15英寸</a></div></dd> <dd><div><a>16英寸-17英寸</a></div></dd> </dl> <dl> <dt>平台：</dt> <dd><div><a>全部</a></div></dd> <dd><div><a>AMD Brazos APU平台</a></div></dd> <dd><div><a>Intel Sandy Bridge平台</a></div></dd> <dd><div><a>Intel平台</a></div></dd> <dd><div><a>AMD平台</a></div></dd> </dl> <dl> <dt>显卡：</dt> <dd><div><a>全部</a></div></dd> <dd><div><a>独立显卡</a></div></dd> <dd><div><a>集成显卡</a></div></dd> <dd><div><a>核芯显卡</a></div></dd> </dl> </div></div><script type="text/javascript" src='js/jquery-1.10.2.min.js'></script><script type="text/javascript">var arr = [];$(function(){ $(".store dt+dd a").attr("class",'all-color'); $(".store a").click(function(){ $(this).parents("dl").children('dd').each(function(){ $(this).children('div').children('a').removeClass("all-color") }) $(this).attr("class",'all-color'); $(this).parentsUntil("dl").parent().hide(); arr.push($(this)); var val = $(this).html(); var domItem = `<a onclick=deletes('${val}') rel='${val}' > × <span>${val}</span> </a>`; $(".itme").append(domItem); })})function deletes(val){ $(".filter").find("a[rel='"+val+"']").remove(); for(var i=0;i<arr.length;i++){ if(arr[i].html() == val ){ arr[i].parentsUntil("dl").parent().show(); arr.splice(i,1); i--; }else{ arr[i].parentsUntil("dl").parent().hide(); } }}</script></body></html>web前端开发学习Q-q-u-n： 767-273-102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

二、css代码

*{margin:0;padding:0;}ul{list-style: none;}a{text-decoration: none;cursor:pointer;}.container{ width:720px; margin:20px auto 0 auto; border-width: 2px 1px 0 1px; border-color: #ff5500 #ccc #ccc #ccc; border-style:solid;}.filter{ padding:10px 0 10px 36px; background: #f2f2f2; border-bottom:1px solid #ccc; font-size:14px; display: flex;}.itme{ margin-left:10px;}.itme a{ padding:0 10px; margin:0 5px; border:1px solid #ff5500; border-radius: 5px; background: #fff; color:red;}.store dl{ padding: 0 0 15px 110px; border-bottom: 1px solid #ccc; display: flex; flex-wrap: wrap; font-size:12px;}.store dl dt{ width:110px; margin:15px 0 0 -110px; text-align: right; line-height: 16px; font-size:14px; color:#404040; font-weight: bold;}.store dl dd{ margin:12px 18px 0 0;}.all-color{ background: blue; color:#fff;}web前端开发学习Q-q-u-n： 767-273-102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）