jquery仿排列顺序,变换颜色更换class
ps:箭头是字体图标,需要的可以去阿里字体下载,也可自己替换图片
点击之后的
代码部分
<ul class="Ep_sxxz">
<span class="eponset">排序顺序:</span>
<li class="ep_xz">按租金 <i class="iconfont icon-jiantou"></i></li>
<li>按面积 <i class="iconfont icon-jiantou1"></i></li>
<li>按时间 <i class="iconfont icon-jiantou1"></i></li>
<li>按热度 <i class="iconfont icon-jiantou1"></i></li>
</ul>
$(".Ep_sxxz li").click(function(){
$(this).addClass("ep_xz").siblings().removeClass("ep_xz");
if($(this).children("i").is('.icon-jiantou')){
$(this).children("i").removeClass("icon-jiantou").addClass("icon-jiantou1");
}else if($(this).children("i").is('.icon-jiantou1')){
$(this).children("i").removeClass("icon-jiantou1").addClass("icon-jiantou");
}
})
jquery仿排列顺序,变换颜色更换class的更多相关文章
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
- jquery 仿手机屏幕切换界面效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery仿购物网站放大镜特效所遇问题及思考
JQuery仿购物网站放大镜特效所遇问题及思考 先贴下效果图,然后描述起来也就不会不知道我在说什么了. 我碰到的问题一: 一开始我自己总结了是因为两个小原因导致的①使用了mouseover,mouse ...
- jquery仿搜狐投票动画代码
体验效果:http://hovertree.com/texiao/jquery/21/ 这是一款基于jquery实现的仿搜狐投票动画特效源码,运行该源码可见VS图标首先出现在中间位置,紧接着随着投票比 ...
- jQuery仿阿里云购买选择购买时间长度
效果:http://hovertree.com/texiao/jquery/61/ jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段 代码: <!doctype ht ...
- 计算机中的颜色XIV——快速变换颜色的V分量
基本知识回顾: 计算机中的颜色Color,用RGB模式存储(用R.G.B三个分量表示颜色,每个分量的范围是0—255). 而计算机中的颜色除了用RGB模式表示以外,常见的还有HSV模式(或者是HSB. ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 一款jQuery仿海尔官网全屏焦点图特效代码
一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...
- jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]
jquery仿alert提示框.confirm确认对话框.prompt带输入的提示框插件实例演示 第一步:引入所需要的jquery插件文件: http://www.angelweb.cn/Inc/eg ...
随机推荐
- [转帖]linux操作系统测试工具
linux操作系统测试工具 http://cfdtesting.com/879156.html 作者: minions_222 来源: CFDTesting.com采编 发布于: ...
- (三)shiro的认证
文章目录 认证思路 自定义用于登录检验的Realm的思路 代码实现 后记 认证思路 调用 SecurityUtils.getSubject() 方法,获取当前的 Subject 对象 : 调用 Sub ...
- STL源码剖析——空间配置器Allocator#2 一/二级空间配置器
上节学习了内存配置后的对象构造行为和内存释放前的对象析构行为,在这一节来学习内存的配置与释放. C++的内存配置基本操作是::operator new(),而释放基本操作是::operator del ...
- typedef用法和陷阱
一.typedef的用法 1.用typedef来声明新的类型名,来代替已有的类型名,也就是给类型起别名.比如 typedef float REAL; //用REAL来代表float类型 REAL a; ...
- php数组指针函数
数组指针函数有reset(),prev(),current(),next(),end(),key(),each() 其中reset(),prev(),current(),next(),end(),都是 ...
- sublime3 安装markdown插件
sublime3 安装markdown插件 第一步安装package control 自动安装package control 手动安装package control 安装具体的markdown相关的p ...
- PAT(B) 1062 最简分数(Java)
题目链接:1062 最简分数 (20 point(s)) 题目描述 一个分数一般写成两个整数相除的形式:N/M,其中 M 不为0.最简分数是指分子和分母没有公约数的分数表示形式. 现给定两个不相等的正 ...
- PAT(B) 1027 打印沙漏(Java)
题目链接:1027 打印沙漏 (20 point(s)) 题目描述 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个"*",要求按下列格式打印 ***** *** * ...
- Cortex_m7内核cache深入了解和应用
一,cache概述 从下图可以看出,从M7内核才开始有的cache,这对于从M0,M3,M4一路走来的小伙伴来说,多了一个cache就多了一个障碍. Cortex-M7 core with 32K/3 ...
- Scratch编程:游泳的火柴人(四)
“ 上节课的内容全部掌握了吗?反复练习了没有,编程最好的学习方法就是练习.练习.再练习.一定要记得多动手.多动脑筋哦~~” 01 — 游戏介绍 这是一款简单的小游戏,实现了一个手绘的火柴人在水里游泳. ...