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

    

解决办法: 结合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之间的切换的更多相关文章

  1. Android两个页面之间的切换效果工具类

    import android.annotation.SuppressLint; import android.app.Activity; import android.content.Context; ...

  2. iOS 两个应用之间的切换

    A 跳到B NSURL *urlT = [NSURL URLWithString:@"TestB://XXXXXXX"]; //注意“://”后面可以任意传参数.这些参数传过去后当 ...

  3. Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)

    前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...

  4. DOM的小练习,两个表格之间数据的移动

    本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head>   <meta http-equiv="Content-Type" ...

  5. IOS关于UIViewController之间的切换

    IOS关于UIViewController之间的切换 1.NavigationController切换UIViewController的两种方式 方法一右侧进入 1 SecondViewControl ...

  6. Objective-C ,ios,iphone开发基础:多个视图(view)之间的切换2,使用导航栏控制,以及视图之间传值。

    首先需要说明的是每个应用程序都是一个window,背景色为黑色.在window上可以跑多个view进行来回切换,下面就通过手动写代码来体现导航栏切换view的原理. 第一步,新建一个single vi ...

  7. 多个Activity之间的切换与数据交互

    总结 两个activity之间切换我概括的分为两步: 1. 代码实现切换操作.2.配置中声明另外一个acitivity! 1. 代码实现切换操作 显示定义一个intent 对象,Intent 这个类的 ...

  8. 如何解决两个li之间的缝隙

    如何解决两个li之间的缝隙的问题: 在做一个类似按钮左右滑动的选择器的动效,遇到了个是关于li之间的缝隙的问题: HTML如下: <span class="c1mChanger&quo ...

  9. Android -- 两个activity界面的切换, 显示Intent 和 隐式Intent,putExtra传递数据

    1. 两个Activity之间可以通过Intent切换, 包括显示Intent 和 隐式Intent. 实例代码 MainActivity.java public class MainActivity ...

随机推荐

  1. JAVA字符串缓存器全部方法功能及其作用

    不知道干嘛的 serialVersionUID 构造一个没有字符的字符串缓冲区,初始容量为16个字符. StringBuffer() 构造一个没有字符的字符串缓冲区和指定的初始容量. StringBu ...

  2. 谁说 JavaScript 简单的?

    这里有一些 Javascript初学者应该知道的技巧和陷阱.如果你已经是专家了,顺便温习一下. Javascript也只不过是一种编程语言.怎么可能出错嘛? 1. 你有没有尝试给一组数字排序? Jav ...

  3. Linux下ping,telnet,ssh命令的比较

    ping工作在OSI模型的第三层,网络层. 主要用于测试到达目的主机的网络是否连接,不能检测某个端口是否开放. ping使用ICMP协议,不使用某个特定端口. 也可以 ping 域名 ,这样可以直接看 ...

  4. python IDLE中反斜杠显示为人民币符号¥的解决办法

    改换英文字体即可

  5. Beta 第二天

    今天遇到的困难: 组员对github极度的不适应 Android Studio版本不一致项目难以打开运行 移植云端的时候,愚蠢的把所有项目开发环境全部搬上去.本身云的内存小,性能差,我们花费了太多时间 ...

  6. 201621123062《java程序设计》第11周作业总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 思维导图: 2. 书面作业 本次PTA作业题集多线程 2.1. 源代码阅读:多线程程序BounceThread 2 ...

  7. 201621123035 《Java程序设计》第1周学习总结

    1.本周学习总结 本周学习内容:Java平台概论.认识JDK规范与操作.了解JVM.JRE与JDK.撰写Java原始码.path是什么 关键词:JVM.JRE.JDK 联系:JVM是Java虚拟机的缩 ...

  8. Week03-面向对象入门

    1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词,如类.对象.封装等 类 对象 封装 继承 覆盖 重载 构造函数 static public private toString f ...

  9. 张金禹 C语言--第0次作业

    1:在填报专业的时候,我也犹豫了很久,但最后还是选择了计算机专业.因为在上大学之前我就对编程.设计等有浓厚的兴趣,但繁重的高中学习任务使我没有过多的去关注,所以我选择了计算机专业去培养我在这方面的兴趣 ...

  10. Python 单向循环链表

    操作 is_empty() 判断链表是否为空 length() 返回链表的长度 travel() 遍历 add(item) 在头部添加一个节点 append(item) 在尾部添加一个节点 inser ...