上图为人人网好友分组功能模块,我用firebug对其高度进行了改动,所以这里显示的高度比实际的低。图示效果源自facebook,结构比较精细,体验上佳,图中的深色表选中状态。
本文就将演示如何使用jQuery的addClasas与removeClass轻松实现上面很赞的样式效果。本文实例效果包括两个主要部分,一是单击单个好友样式的切换,还有一个就是单击“已选”“未选”文字选项卡按钮后的样式的筛选,均使用ddClasas与removeClass实现。
提供完整的css样式以及JavaScript代码,提供demo实例演示页面和源文件下载。希望对您有所帮助。