仿京东超市多条件筛选（jquery实现），欢迎前来拍砖
日期：2014-05-17 浏览次数：20584 次
仿京东商城多条件筛选（jquery实现），欢迎前来拍砖！
闲来无事，想做一个类似京东商城那种多条件筛选效果，京东效果如下：
由于对jquery的不熟悉，短短几行代码写了一上午。惭愧。
另外，对jquery体会最深的一点是，可以通过很多种方法达到同样的显示效果，但是本质却有着非常大的区别。例如：
通过".attr('class', 'seled')"和".addClass('seled')"都可以为选中的对象添加样式，并且达到同样的显示效果，但是这两种添加样式的方法在"$("#filter a[class='seled']")"眼中却是不一样的。
废话不多说，上代码。
对了，由于不是美工，所以测试方面没怎么在意，我选择用的都是高版本的浏览器，Chrome 13.0.782.107 m、Firefox 5.0、IE9
闲来无事，想做一个类似京东商城那种多条件筛选效果，京东效果如下：
由于对jquery的不熟悉，短短几行代码写了一上午。惭愧。
另外，对jquery体会最深的一点是，可以通过很多种方法达到同样的显示效果，但是本质却有着非常大的区别。例如：
通过".attr('class', 'seled')"和".addClass('seled')"都可以为选中的对象添加样式，并且达到同样的显示效果，但是这两种添加样式的方法在"$("#filter a[class='seled']")"眼中却是不一样的。
废话不多说，上代码。
对了，由于不是美工，所以测试方面没怎么在意，我选择用的都是高版本的浏览器，Chrome 13.0.782.107 m、Firefox 5.0、IE9
<!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
{
&nb
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
