仿京东产品列表搜寻
仿京东产品列表搜索
<!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>