关于js筛选搜索

http://www.che168.com/china/list/这是筛选搜索网站,不太会修改转成自己的代码 很混乱...

解决方案 »

  1.   

    一个简单的例子，保存为 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>&nbsp;-&nbsp;商品筛选</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>