css不好实现的效果，通过背景图片来弥补。

css

html

                默认                销量                新品                                     价格                            

效果有了，剩下的就是通过js逻辑和程序逻辑来实现排序了。

实现功能

html改造

默认销量新品     价格

增加date-type，统一的class 'sort'。

js事件

$('.sort').click(function() {    var type = $(this).data('type');    var category_id = '{sh:$category_id}';    var sort;    if ($(this).hasClass('sorted')) { // 降序        $(this).removeClass('sorted').addClass('sortedDESC');        sort = '-1';    }else if ($(this).hasClass('sortedASC')) { // 降序        $(this).removeClass('sortedASC').addClass('sortedDESC');        sort = '-1';    }else if ($(this).hasClass('sortedDESC')) { // 升序        $(this).removeClass('sortedDESC').addClass('sortedASC');        sort = '1';    }    if (type =='default') {        location.href="{sh::U('Store/Home/goodslist',array('category_id'=>'"+category_id+"'))}";    } else {        location.href="{sh::U('Store/Home/goodslist',array('category_id'=>'"+category_id+"','"+type+"'=>'"+sort+"'))}";    }    });

后台处理

if ($sale = $this->_request('sale')) {    if ($sale == '-1') {        $order = '(salecount+fakemembercount) desc';    }    if ($sale == '1') {        $order = '(salecount+fakemembercount) asc';    }    $this->assign('sale',$sale);}if ($price = $this->_request('price')) {    if ($price == '-1') {        $order = 'oprice desc';    }    if ($price == '1') {        $order = 'oprice asc';    }    $this->assign('price',$price);}if ($new = $this->_request('new')) {    if ($new == '-1') {        $order = 'addtime desc';    }    if ($new == '1') {        $order = 'addtime asc';    }    $this->assign('new',$new);}

tips:这里是大概的思路，具体需要你们根据实际情况去实现，可以优化成异步加载。

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5743537.html如需转载请自行联系原作者