两个css之间的切换
需求: 头部两个按钮 两种样式之间的切换


解决办法: 结合JQ 三目运算 来处理
第一步: 把需要切换的样式设置为样式里背景,这样做的目的为了避免 js里出现过多 css代码
二来这样会显得更加的清晰,明了

第二步
运用JQ 和 三目运算进行样式的快捷切换
此处强调下 采用三目运算的目的是为了筛选样式名,避免if语句的冗杂,使代码显得更加的清晰
changeClass: function(dom,cur,pre) {
$(dom).removeClass($(dom).hasClass(pre) ? pre : '');
$(dom).addClass(cur);
$(dom).siblings().removeClass($(dom).hasClass(cur) ? cur : '');
$(dom).siblings().addClass(pre);
},
参数说明:
dom: 点击的元素
cur: 激活时候的className
pre: 未激活时的className
这样就可以实现两个元素或更多元素,两个样式间的切换~~~
两个css之间的切换的更多相关文章
- Android两个页面之间的切换效果工具类
import android.annotation.SuppressLint; import android.app.Activity; import android.content.Context; ...
- iOS 两个应用之间的切换
A 跳到B NSURL *urlT = [NSURL URLWithString:@"TestB://XXXXXXX"]; //注意“://”后面可以任意传参数.这些参数传过去后当 ...
- Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)
前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...
- DOM的小练习,两个表格之间数据的移动
本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head> <meta http-equiv="Content-Type" ...
- IOS关于UIViewController之间的切换
IOS关于UIViewController之间的切换 1.NavigationController切换UIViewController的两种方式 方法一右侧进入 1 SecondViewControl ...
- Objective-C ,ios,iphone开发基础:多个视图(view)之间的切换2,使用导航栏控制,以及视图之间传值。
首先需要说明的是每个应用程序都是一个window,背景色为黑色.在window上可以跑多个view进行来回切换,下面就通过手动写代码来体现导航栏切换view的原理. 第一步,新建一个single vi ...
- 多个Activity之间的切换与数据交互
总结 两个activity之间切换我概括的分为两步: 1. 代码实现切换操作.2.配置中声明另外一个acitivity! 1. 代码实现切换操作 显示定义一个intent 对象,Intent 这个类的 ...
- 如何解决两个li之间的缝隙
如何解决两个li之间的缝隙的问题: 在做一个类似按钮左右滑动的选择器的动效,遇到了个是关于li之间的缝隙的问题: HTML如下: <span class="c1mChanger&quo ...
- Android -- 两个activity界面的切换, 显示Intent 和 隐式Intent,putExtra传递数据
1. 两个Activity之间可以通过Intent切换, 包括显示Intent 和 隐式Intent. 实例代码 MainActivity.java public class MainActivity ...
随机推荐
- JAVA字符串缓存器全部方法功能及其作用
不知道干嘛的 serialVersionUID 构造一个没有字符的字符串缓冲区,初始容量为16个字符. StringBuffer() 构造一个没有字符的字符串缓冲区和指定的初始容量. StringBu ...
- 谁说 JavaScript 简单的?
这里有一些 Javascript初学者应该知道的技巧和陷阱.如果你已经是专家了,顺便温习一下. Javascript也只不过是一种编程语言.怎么可能出错嘛? 1. 你有没有尝试给一组数字排序? Jav ...
- Linux下ping,telnet,ssh命令的比较
ping工作在OSI模型的第三层,网络层. 主要用于测试到达目的主机的网络是否连接,不能检测某个端口是否开放. ping使用ICMP协议,不使用某个特定端口. 也可以 ping 域名 ,这样可以直接看 ...
- python IDLE中反斜杠显示为人民币符号¥的解决办法
改换英文字体即可
- Beta 第二天
今天遇到的困难: 组员对github极度的不适应 Android Studio版本不一致项目难以打开运行 移植云端的时候,愚蠢的把所有项目开发环境全部搬上去.本身云的内存小,性能差,我们花费了太多时间 ...
- 201621123062《java程序设计》第11周作业总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 思维导图: 2. 书面作业 本次PTA作业题集多线程 2.1. 源代码阅读:多线程程序BounceThread 2 ...
- 201621123035 《Java程序设计》第1周学习总结
1.本周学习总结 本周学习内容:Java平台概论.认识JDK规范与操作.了解JVM.JRE与JDK.撰写Java原始码.path是什么 关键词:JVM.JRE.JDK 联系:JVM是Java虚拟机的缩 ...
- Week03-面向对象入门
1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词,如类.对象.封装等 类 对象 封装 继承 覆盖 重载 构造函数 static public private toString f ...
- 张金禹 C语言--第0次作业
1:在填报专业的时候,我也犹豫了很久,但最后还是选择了计算机专业.因为在上大学之前我就对编程.设计等有浓厚的兴趣,但繁重的高中学习任务使我没有过多的去关注,所以我选择了计算机专业去培养我在这方面的兴趣 ...
- Python 单向循环链表
操作 is_empty() 判断链表是否为空 length() 返回链表的长度 travel() 遍历 add(item) 在头部添加一个节点 append(item) 在尾部添加一个节点 inser ...