京东商城效果图: 自己实现的效果图: 实现代码如下: 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 οnlοad="jiazai()"> <div id="filter"> <div id="pinpai"> <span class="leibie"><strong>品牌:</strong></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">全部</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">惠普</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">海尔</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">微星</a></span> </div> <div id="jiage"> <span class="leibie"><strong>价格:</strong></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">全部</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">1-2999</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">3000-3999</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">4000-4999</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">5000-5999</a></span> </div> <div id="chicun"> <span class="leibie"><strong>尺寸:</strong></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">全部</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">8.9英寸及以下</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">11英寸</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">12英寸</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">13英寸</a></span> </div> <div id="pingtai"> <span class="leibie"><strong>平台:</strong></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">全部</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">Inter平台</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">AMD平台</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">VIA平台</a></span> </div> <div id="xianka"> <span class="leibie"><strong>显卡:</strong></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">全部</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">独立显卡</a></span> <span class="common"><a href="#" mce_href="#" οnclick="aClick(event)">集成显卡</a></span> </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-->