1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>仿京东多条件筛选</title>
6 <style type="text/css">
7 #filter
8 {
9 width:620px;
10 height:auto;
11 margin-left:auto;
12 margin-right:auto;
13 font-size:12px;
14 }
15
16 #filter dl
17 {
18 padding:0;
19 margin-top:0;
20 margin-bottom:0;
21 clear:both;
22 padding:4px 0;
23 }
24
25 #filter dt,dd
26 {
27 display:block;
28 float:left;
29 width:auto;
30 padding:0;
31 margin:3px 0;
32 }
33
34 #filter dt
35 {
36 height:14px;
37 padding-bottom:4px;
38 font-weight:bold;
39 color:#333333;
40 }
41
42 #filter dd
43 {
44 color:#005AA0;
45 margin-right:8px;
46 }
47
48 #filter a
49 {
50 cursor:pointer;
51 }
52
53 .seling
54 {
55 background-color:#005AA0;
56 color:#FFFFFF;
57 }
58
59 .seled
60 {
61 background-color:#005AA0;
62 color:#FFFFFF;
63 }
64 </style>
65 </head>
66 <body>
67 <div id="filter">
68 <dl>
69 <dt>品牌：</dt>
70 <dd><div><a name="pinpai">全部</a></div></dd>
71 <dd><div><a name="pinpai">惠普(hp)</a></div></dd>
72 <dd><div><a name="pinpai">联想(Lenovo)</a></div></dd>
73 <dd><div><a name="pinpai">联想(ThinkPad)</a></div></dd>
74 <dd><div><a name="pinpai">宏基(acer)</a></div></dd>
75 <dd><div><a name="pinpai">华硕</a></div></dd>
76 <dd><div><a name="pinpai">戴尔</a></div></dd>
77 <dd><div><a>三星</a></div></dd>
78 <dd><div><a>索尼</a></div></dd>
79 <dd><div><a>东芝</a></div></dd>
80 <dd><div><a>Gateway</a></div></dd>
81 <dd><div><a>微星</a></div></dd>
82 <dd><div><a>海尔</a></div></dd>
83
84 </dl>
85 <dl>
86 <dt>价格：</dt>
87 <dd><div><a name="price">全部</a></div></dd>
88 <dd><div><a name="price">1000-2999</a></div></dd>
89 <dd><div><a name="price">3000-3499</a></div></dd>
90 <dd><div><a name="price">3500-3999</a></div></dd>
91 <dd><div><a name="price">4000-4499</a></div></dd>
92
93 </dl>
94 <dl>
95 <dt>尺寸：</dt>
96 <dd><div><a name="chicun">全部</a></div></dd>
97 <dd><div><a name="chicun">8.9英寸及以下</a></div></dd>
98 <dd><div><a name="chicun">11英寸</a></div></dd>
99 <dd><div><a name="chicun">12英寸</a></div></dd>
100 <dd><div><a>13英寸</a></div></dd>
101 <dd><div><a>14英寸</a></div></dd>
102 <dd><div><a>15英寸</a></div></dd>
103 <dd><div><a>16英寸-17英寸</a></div></dd>
104 </dl>
105 <dl>
106 <dt>平台：</dt>
107 <dd><div><a name="pingtai">全部</a></div></dd>
108 <dd><div><a name="pingtai">AMD Brazos APU平台</a></div></dd>
109 <dd><div><a name="pingtai">Intel Sandy Bridge平台</a></div></dd>
110 <dd><div><a>Intel平台</a></div></dd>
111 <dd><div><a>AMD平台</a></div></dd>
112 </dl>
113 <dl>
114 <dt>显卡：</dt>
115 <dd><div><a name="xianka">全部</a></div></dd>
116 <dd><div><a name="xianka">独立显卡</a></div></dd>
117 <dd><div><a name="xianka">集成显卡</a></div></dd>
118 <dd><div><a name="xianka">核芯显卡</a></div></dd>
119 </dl>
120 </div>
121 <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
122 <script type="text/javascript">
123 $(function () {
124 //选中filter下的所有a标签，为其添加hover方法，该方法有两个参数，分别是鼠标移上和移开所执行的函数。
125 $("#filter a").hover(
126 function () {
127 $(this).addClass("seling");
128 },
129 function () {
130 $(this).removeClass("seling");
131 }
132 );
133 //选中filter下所有的dt标签，并且为dt标签后面的第一个dd标签下的a标签添加样式seled。(感叹jquery的强大)
134 $("#filter dt+dd a").attr("class", "seled"); /*注意：这儿应该是设置(attr)样式，而不是添加样式(addClass)，
135 不然后面通过$("#filter a[class='seled']")访问不到class样式为seled的a标签。*/
136
137 //为filter下的所有a标签添加单击事件
138 $("#filter a").click(function () {
139 $(this).parents("dl").children("dd").each(function () {
140 //下面三种方式效果相同（第三种写法的内部就是调用了find()函数，所以，第二、三种方法是等价的。）
141 //$(this).children("div").children("a").removeClass("seled");
142 //$(this).find("a").removeClass("seled");
143 $('a',this).removeClass("seled");
144 });
145
146 $(this).attr("class", "seled");
147
148 alert(RetSelecteds()); //返回选中结果
149 });
150
151 });
152
153 function RetSelecteds() {
154 var result = "";
155 $("#filter a[class='seled']").each(function () {
156 result += $(this).attr("name")+"="+$(this).html()+"&";
157 });
158 return result;
159 }
160 </script>
161 </body>
162 </html>
