仿京东商城多条件筛选

最新推荐文章于 2024-06-13 16:55:06 发布

zhengbo0

最新推荐文章于 2024-06-13 16:55:06 发布

阅读量2.7k

点赞数 1

分类专栏： javascript

javascript 专栏收录该内容

67 篇文章 2 订阅

订阅专栏

京东效果图：

代码效果图：

HTML结构及CSS样式：

[html]view plaincopy 
   
 <!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>  
     <title>360buy多条件筛选</title>  
     <style type="text/css">  
         #filter  
         {  
             width:620px;  
             height:auto;  
             margin-left:auto;  
             margin-right:auto;  
             font-size:12px;  
         }  
           
         #filter dl  
         {  
             padding:0;  
             margin-top:0;  
             margin-bottom:0;  
             clear:both;  
             padding:4px 0;          
         }  
           
         #filter dt,dd  
         {  
             display:block;  
             float:left;  
             width:auto;  
             padding:0;  
             margin:3px 0;                     
         }  
           
         #filter dt  
         {  
             height:14px;  
             padding-bottom:4px;  
             font-weight:bold;  
             color:#333333;            
         }  
           
         #filter dd  
         {  
             color:#005AA0;  
             margin-right:8px;  
         }  
           
         #filter a  
         {  
             cursor:pointer;  
         }  
           
         .seling  
         {  
             background-color:#005AA0;  
             color:#FFFFFF;  
         }  
           
         .seled  
         {  
             background-color:#005AA0;  
             color:#FFFFFF;  
         }  
     </style>  
 </head>  
 <body>  
     <div id="filter">  
         <dl>  
             <dt>品牌：</dt>  
             <dd><div><a>全部</a></div></dd>  
             <dd><div><a>惠普(hp)</a></div></dd>  
             <dd><div><a>联想(Lenovo)</a></div></dd>  
             <dd><div><a>联想(ThinkPad)</a></div></dd>  
             <dd><div><a>宏基(acer)</a></div></dd>  
             <dd><div><a>华硕</a></div></dd>  
             <dd><div><a>戴尔</a></div></dd>  
             <dd><div><a>三星</a></div></dd>  
             <dd><div><a>索尼</a></div></dd>  
             <dd><div><a>东芝</a></div></dd>  
             <dd><div><a>Gateway</a></div></dd>  
             <dd><div><a>微星</a></div></dd>  
             <dd><div><a>海尔</a></div></dd>  
             <dd><div><a>清华同方</a></div></dd>  
             <dd><div><a>富士通</a></div></dd>  
             <dd><div><a>苹果(Apple)</a></div></dd>  
             <dd><div><a>神舟</a></div></dd>  
             <dd><div><a>方正</a></div></dd>  
             <dd><div><a>优雅</a></div></dd>  
         </dl>  
         <dl>  
             <dt>价格：</dt>  
             <dd><div><a>全部</a></div></dd>  
             <dd><div><a>1000-2999</a></div></dd>  
             <dd><div><a>3000-3499</a></div></dd>  
             <dd><div><a>3500-3999</a></div></dd>  
             <dd><div><a>4000-4499</a></div></dd>  
             <dd><div><a>4500-4999</a></div></dd>  
             <dd><div><a>5000-5999</a></div></dd>  
             <dd><div><a>6000-6999</a></div></dd>  
             <dd><div><a>7000-9999</a></div></dd>  
             <dd><div><a>10000以上</a></div></dd>  
         </dl>  
         <dl>  
             <dt>尺寸：</dt>  
             <dd><div><a>全部</a></div></dd>  
             <dd><div><a>8.9英寸及以下</a></div></dd>  
             <dd><div><a>11英寸</a></div></dd>  
             <dd><div><a>12英寸</a></div></dd>  
             <dd><div><a>13英寸</a></div></dd>  
             <dd><div><a>14英寸</a></div></dd>  
             <dd><div><a>15英寸</a></div></dd>  
             <dd><div><a>16英寸-17英寸</a></div></dd>  
         </dl>  
         <dl>  
             <dt>平台：</dt>  
             <dd><div><a>全部</a></div></dd>  
             <dd><div><a>AMD Brazos APU平台</a></div></dd>  
             <dd><div><a>Intel Sandy Bridge平台</a></div></dd>  
             <dd><div><a>Intel平台</a></div></dd>  
             <dd><div><a>AMD平台</a></div></dd>  
         </dl>  
         <dl>  
             <dt>显卡：</dt>  
             <dd><div><a>全部</a></div></dd>  
             <dd><div><a>独立显卡</a></div></dd>  
             <dd><div><a>集成显卡</a></div></dd>  
             <dd><div><a>核芯显卡</a></div></dd>              
         </dl>  
     </div>  
 </body>  
 </html>  

Javascript代码：

[javascript]view plaincopy 
   
 <script type="text/javascript" src="jquery-1.6.1.min.js"></script>  
 <script type="text/javascript">  
     $(function () {  
         //选中filter下的所有a标签，为其添加hover方法，该方法有两个参数，分别是鼠标移上和移开所执行的函数。  
         $("#filter a").hover(  
             function () {  
                 $(this).addClass("seling");  
             },  
             function () {  
                 $(this).removeClass("seling");  
             }  
         );  
   
   
         //选中filter下所有的dt标签，并且为dt标签后面的第一个dd标签下的a标签添加样式seled。(感叹jquery的强大)  
         $("#filter dt+dd a").attr("class", "seled"); /*注意：这儿应该是设置(attr)样式，而不是添加样式(addClass)， 
                                                       不然后面通过$("#filter a[class='seled']")访问不到class样式为seled的a标签。*/         
   
         //为filter下的所有a标签添加单击事件  
         $("#filter a").click(function () {  
             $(this).parents("dl").children("dd").each(function () {  
                 //下面三种方式效果相同（第三种写法的内部就是调用了find()函数，所以，第二、三种方法是等价的。）  
                 //$(this).children("div").children("a").removeClass("seled");  
                 //$(this).find("a").removeClass("seled");  
                 $('a',this).removeClass("seled");  
             });  
   
             $(this).attr("class", "seled");  
   
             alert(RetSelecteds()); //返回选中结果  
         });  
         alert(RetSelecteds()); //返回选中结果  
     });  
   
     function RetSelecteds() {  
         var result = "";  
         $("#filter a[class='seled']").each(function () {  
             result += $(this).html()+"\n";  
         });  
         return result;  
     }  
 </script>  

zhengbo0

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
仿京东商城多条件筛选

京东效果图：代码效果图：HTML结构及CSS样式：[html] view plaincopy> html xmlns="http://www.w3.org/1999/xhtml"> head> title>360buy多条件筛选title>
复制链接

扫一扫

专栏目录