JavaScript练习——仿京东商城实现多条件筛选

现在的位置: 首页 > 综合 > 正文

JavaScript练习——仿京东商城实现多条件筛选

2013年06月13日 ⁄ 综合 ⁄ 共 3839字 ⁄ 字号小中大 ⁄ 评论关闭

京东商城效果图：

自己实现的效果图：

实现代码如下：

CSS代码：

*{ border:0; padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; } #pinpai,#jiage,#chicun,#pingtai,#xianka{ display:block; } #main{ width:500px; height:500px; } .leibie{ font-size:14px; font-weight:400; } .common{ font-size:12px; margin-left:5px; margin-right:5px; } #filter a{ color:#666666; text-decoration:none; } #filter a:hover{ background-color:#4598d2; } .bgColor{ background-color:#4598d2; }

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body onload="jiazai()"> <div id="filter"> <div id="pinpai"> 品牌： <a href="#" mce_href="#" onclick="aClick(event)">全部</a> <a href="#" mce_href="#" onclick="aClick(event)">惠普</a> <a href="#" mce_href="#" onclick="aClick(event)">海尔</a> <a href="#" mce_href="#" onclick="aClick(event)">微星</a> </div> <div id="jiage"> 价格： <a href="#" mce_href="#" onclick="aClick(event)">全部</a> <a href="#" mce_href="#" onclick="aClick(event)">1-2999</a> <a href="#" mce_href="#" onclick="aClick(event)">3000-3999</a> <a href="#" mce_href="#" onclick="aClick(event)">4000-4999</a> <a href="#" mce_href="#" onclick="aClick(event)">5000-5999</a> </div> <div id="chicun"> 尺寸： <a href="#" mce_href="#" onclick="aClick(event)">全部</a> <a href="#" mce_href="#" onclick="aClick(event)">8.9英寸及以下</a> <a href="#" mce_href="#" onclick="aClick(event)">11英寸</a> <a href="#" mce_href="#" onclick="aClick(event)">12英寸</a> <a href="#" mce_href="#" onclick="aClick(event)">13英寸</a> </div> <div id="pingtai"> 平台： <a href="#" mce_href="#" onclick="aClick(event)">全部</a> <a href="#" mce_href="#" onclick="aClick(event)">Inter平台</a> <a href="#" mce_href="#" onclick="aClick(event)">AMD平台</a> <a href="#" mce_href="#" onclick="aClick(event)">VIA平台</a> </div> <div id="xianka"> 显卡： <a href="#" mce_href="#" onclick="aClick(event)">全部</a> <a href="#" mce_href="#" onclick="aClick(event)">独立显卡</a> <a href="#" mce_href="#" onclick="aClick(event)">集成显卡</a> </div> </div> </body> </html>

JavaScript代码:

//加载事件 function jiazai() { var root = document.getElementById("filter").getElementsByTagName("div");//找错一共有多少行。 for(var i = 0; i < root.length;i++) { var tagAs = root[i].getElementsByTagName("a");//每一行中由a标签构成的数组。 tagAs[0].className = 'bgColor'; } } //a标签的单击事件，改变背景颜色 function aClick(event) { var tag = event.srcElement || event.target;//找到单击被点击的元素 var father = tag.parentNode;//找到最近的一个div标签 while(father.nodeName != "DIV")//如果tag的父级标签不是div标签则继续往上找 { father = father.parentNode; } var fatherID = father.id;//找到tag标签最近一个父级div标签的id //将fatherID该div对象下面的所有a标签，将各个a标签的className属性清空 for(var i = 0; i < document.getElementById(fatherID).getElementsByTagName("a").length;i++) { document.getElementById(fatherID).getElementsByTagName("a")[i].className = ""; } //为事件源tag对象添加className样式 tag.className = 'bgColor'; alert(fe()); } //遍历所有a标签，根据a标签的className不同来获取用户选中的类型 function fe() { var result = ""//记录返回的条件 var root = document.getElementById("filter").getElementsByTagName("a");//获取id为filter标签下面的所有a标签 for(var i = 0; i < root.length;i++) { if(root[i].className == 'bgColor') { result += root[i].innerHTML; } } return result; }

<！---End-->

【上篇】热烈庆祝《天人项目网》总经理裘美丽 ——入选浙江大学创业青年俱乐部理事会
【下篇】周杰伦经典语录语句

作者: condemn

该日志由 condemn 于11年前发表在综合分类下，最后更新于 2013年06月13日.
转载请注明: JavaScript练习——仿京东商城实现多条件筛选 | 学步园 +复制链接

抱歉!评论已关闭.

学步园