仿京东商城多条件筛选（jquery实现），欢迎前来拍砖！该如何处理-ASP.NET教程-爱易网页

仿京东商城多条件筛选（jquery实现），欢迎前来拍砖！该如何处理

日期：2014-05-17　浏览次数：20477 次

仿京东商城多条件筛选（jquery实现），欢迎前来拍砖！
闲来无事，想做一个类似京东商城那种多条件筛选效果，京东效果如下：

由于对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>30

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

仿京东商城多条件筛选（jquery实现），欢迎前来拍砖！该如何处理

相关资料更多>

推荐阅读更多>