闲来无事，想做一个类似京东商城那种多条件筛选效果，京东效果如下：
由于对jquery的不熟悉，短短几行代码写了一上午。惭愧。
另外，对jquery体会最深的一点是，可以通过很多种方法达到同样的显示效果，但是本质却有着非常大的区别。例如：
通过".attr('class', 'seled')"和".addClass('seled')"都可以为选中的对象添加样式，并且达到同样的显示效果，但是这两种添加样式的方法在"$("#filter a[class='seled']")"眼中却是不一样的。
废话不多说，上代码。
对了，由于不是美工，所以测试方面没怎么在意，我选择用的都是高版本的浏览器，Chrome 13.0.782.107 m、Firefox 5.0、IE9
- HTML code
<!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>