<!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" /> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>无标题文档</title> <style> *{ 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; } </style> <script language="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'; document.getElementById("dv").innerHTML=fe(); } //遍历所有a标签,根据a标签的className不同来获取用户选中的类型 function fe() { var result = "";//记录返回的条件 var href=""; 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+"<br/>"+"链接为:"+root[i].href+"<br/>"; //换行显示 } } return result; } //--> </script> </head> <body onload="jiazai()"> <div id="filter"> <div id="pinpai"> <span class="leibie"><strong>品牌:</strong></span> <span class="common"><a href="#all_1" mce_href="#" onclick="aClick(event)">全部</a></span> <span class="common"><a href="#all_1_1" mce_href="#" onclick="aClick(event)">惠普</a></span> <span class="common"><a href="#all_1_2" mce_href="#" onclick="aClick(event)">海尔</a></span> <span class="common"><a href="#all_1_3" mce_href="#" onclick="aClick(event)">微星</a></span> </div> <div id="jiage"> <span class="leibie"><strong>价格:</strong></span> <span class="common"><a href="#all_2" mce_href="#" onclick="aClick(event)">全部</a></span> <span class="common"><a href="#all_2_1" mce_href="#" onclick="aClick(event)">1-2999</a></span> <span class="common"><a href="#all_2_2" mce_href="#" onclick="aClick(event)">3000-3999</a></span> <span class="common"><a href="#all_2_3" mce_href="#" onclick="aClick(event)">4000-4999</a></span> <span class="common"><a href="#all_2_4" mce_href="#" onclick="aClick(event)">5000-5999</a></span> </div> <div id="chicun"> <span class="leibie"><strong>尺寸:</strong></span> <span class="common"><a href="#all_3" mce_href="#" onclick="aClick(event)">全部</a></span> <span class="common"><a href="#all_3_1" mce_href="#" onclick="aClick(event)">8.9英寸及以下</a></span> <span class="common"><a href="#all_3_2" mce_href="#" onclick="aClick(event)">11英寸</a></span> <span class="common"><a href="#all_3_3" mce_href="#" onclick="aClick(event)">12英寸</a></span> <span class="common"><a href="#all_3_4" mce_href="#" onclick="aClick(event)">13英寸</a></span> </div> <div id="pingtai"> <span class="leibie"><strong>平台:</strong></span> <span class="common"><a href="#all_4" mce_href="#" onclick="aClick(event)">全部</a></span> <span class="common"><a href="#all_4_1" mce_href="#" onclick="aClick(event)">Inter平台</a></span> <span class="common"><a href="#all_4_2" mce_href="#" onclick="aClick(event)">AMD平台</a></span> <span class="common"><a href="#all_4_5" mce_href="#" onclick="aClick(event)">VIA平台</a></span> </div> <div id="xianka"> <span class="leibie"><strong>显卡:</strong></span> <span class="common"><a href="#all_5" mce_href="#" onclick="aClick(event)">全部</a></span> <span class="common"><a href="#all_5_1" mce_href="#" onclick="aClick(event)">独立显卡</a></span> <span class="common"><a href="#all_5_2" mce_href="#" onclick="aClick(event)">集成显卡</a></span> </div> </div> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <div style="font:bold;color:black" align="center"><h1 id="dv"></h1></div> </body> </html>
详细解决方案
仿京东产品列表搜寻
热度:215 发布时间:2012-08-22 09:50:35.0
相关解决方案