87,992
社区成员
发帖
与我相关
我的任务
分享关于js筛选搜索
http://www.che168.com/china/list/这是筛选搜索网站,不太会修改转成自己的代码 很混乱...
...全文
请发表友善的回复…
发表回复
hch126163 2013-06-20
- 打赏
- 举报
一个简单的例子，保存为 htm 格式看效果
<!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 runat="server">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
*{ margin:0; padding:0; font-size:13px;}
body {background:#fff;font-size:13px;font-family:宋体,Verdana;color:#666;height:100%; width:100%}
dd div a{margin-left:10px;}
a:link {color: #000;text-decoration: none;}
a:visited {color: #666;text-decoration: none;}
a:hover {text-decoration: none;color: #F00; }
a:active {text-decoration: none;}
#current{background:blue; color:red;}
</style>
</head>
<body>
<div style="width:600px; height:auto; margin:50px auto; border:1px solid #ddd; padding:10px;">
<h1>笔记本</h1><strong> - 商品筛选</strong>
<div id="select" >
<dl >
<dt>品牌：</dt>
<dd>
<div>
<a>全部</a>
<a>联想（ThinkPad）</a>
<a>联想（Lenovo）</a>
<a>惠普（hp）</a>
<a>宏碁（acer）</a>
</div>
</dd>
<dt>价格：</dt>
<dd>
<div>
<a>全部</a>
<a>3000-3999</a>
<a>4000-4999</a>
<a>5000-5999</a>
<a>6000-6999</a>
</div>
</dd>
<dt>尺寸：</dt>
<dd>
<div>
<a>全部</a>
<a>11英寸</a>
<a>12英寸</a>
<a>14英寸</a>
<a>15英寸</a>
</div>
</dd>
</dl>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function()
{
var divSelect = document.getElementById("select");
var ddList = divSelect.getElementsByTagName("dd");
var aList=[] ;
var url = document.location.href;
var index = url.indexOf("?p=");
var fileName= (index>0 ? url.substring(0,index):url) +"?p="; //"多条件搜索显示效果.htm?p="; // 当前相对url + "p="
var p ;
if(index>0){p=url.substr(index+3); }
p= p? p.split('-'):[0,0,0];
for(var i=0;i< ddList.length;i++)
{
aList.push( ddList[i].getElementsByTagName("a"));
aList[i][p[i]?p[i]:0].id="current";
}
for(var i=0;i< aList[0].length;i++) // 品牌 链接
{
aList[0][i].href = fileName + i +'-'+ (p[1]?p[1]:0)+'-'+ (p[2]?p[2]:0);
}
for(var i=0;i< aList[1].length;i++) // 价格 链接
{
aList[1][i].href = fileName + (p[0]?p[0]:0)+'-'+ i +'-'+ (p[2]?p[2]:0);
}
for(var i=0;i< aList[2].length;i++) // 尺寸 链接
{
aList[2][i].href = fileName +(p[0]?p[0]:0)+'-'+ (p[1]?p[1]:0)+'-'+ i ;
}
}
</script>
</html>
