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

    

解决办法: 结合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. redis的主从复制(读写分离)/哨兵(主从切换)配置

    准备两个redis服务,两台机器,依次命名文件夹子master,slave1 10.10.10.7 10.10.10.8 1.master修改配置文件 [root@db2 conf]# cat 637 ...

  2. Android类参考---SQLiteOpenHelper

    public 抽象类 SQLiteOpenHelper 继承关系 java.lang.Object |____android.database.sqlite.SQLiteOpenHelper 类概要 ...

  3. DataTables ajax + bootstrap 分页/搜索/排序/常见问题

    最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关 我使用的是官网最新的DataTabl ...

  4. JavaWeb学习笔记五 会话技术Cookie&Session

    什么是会话技术? 例如网站的购物系统,用户将购买的商品信息存储到哪里?因为Http协议是无状态的,也就是说每个客户访问服务器端资源时,服务器并不知道该客户端是谁,所以需要会话技术识别客户端的状态.会话 ...

  5. I know 项目Alpha冲刺随笔集

    Alpha冲刺 Day 1 Alpha冲刺 Day 2 Alpha冲刺 Day 3 Alpha冲刺 Day 4 Alpha冲刺 Day 5 Alpha冲刺 Day 6 Alpha冲刺 Day 7 Al ...

  6. C语言博客作业—函数嵌套调用

    一.实验作业 1.1 PTA题目:递归法对任意10个数据按降序排序 1.1.1设计思路 void sort(int a[],int n) { 定义整型循环变量i,中间变量temp,最小值min: 令m ...

  7. 【iOS】跳转到设置页面

    iOS8.0以后有效 定位服务 定位服务有很多APP都有,如果用户关闭了定位,那么,我们在APP里面可以提示用户打开定位服务.点击到设置界面设置,直接跳到定位服务设置界面.代码如下: 1 2 3 4 ...

  8. bzoj千题计划280:bzoj4592: [Shoi2015]脑洞治疗仪

    http://www.lydsy.com/JudgeOnline/problem.php?id=4592 注意操作1 先挖再补,就是补的范围可以包含挖的范围 SHOI2015 的题 略水啊(逃) #i ...

  9. day-3 python多线程编程知识点汇总

    python语言以容易入门,适合应用开发,编程简洁,第三方库多等等诸多优点,并吸引广大编程爱好者.但是也存在一个被熟知的性能瓶颈:python解释器引入GIL锁以后,多CPU场景下,也不再是并行方式运 ...

  10. JAVA_SE基础——20.数组的常见操作

    1.遍历数组 使用for循环来遍历数组 代码如下: public class Ergodic { public static void main(String[] args) { int[] arr ...