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

    

解决办法: 结合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. Android TextView数字增长动画效果

    某些app上,新进入一个Activity的时候,上面的一个关键性数字(比如金额)会以一个数字不断变大的动画来显示.刚开始的时候,想到的一个方案是:使用Thead+Handler,给定一个动画总时长与刷 ...

  2. 浅析Python3中的bytes和str类型

    Python 3最重要的新特性之一是对字符串和二进制数据流做了明确的区分.文本总是Unicode,由str类型表示,二进制数据则由bytes类型表示.Python 3不会以任意隐式的方式混用str和b ...

  3. present(模态)实现出push的效果

    在present加上这个转场动画,取消掉原来的转场动画  CATransition *animation = [CATransitionanimation];     animation.durati ...

  4. SQL中的DML、DDL以及DCL

    DML(data manipulation language)是数据操纵语言:它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样,这4条命令是用来对数据库里的数据进行操作的 ...

  5. 【Nginx系列】Nginx虚拟主机的配置核日志管理

    Nginx配置段 #user nobody; worker_processes 1;// 有1个工作的子进程,可以自行修改,但太大无益,因为要争夺CPU,一般设置为 CPU数*核数 #error_lo ...

  6. 高级软件工程2017第7次作业--团队项目:Beta阶段综合报告

    Deadline:2017-11-06(周一) 21:00pm (注:以下内容参考集大作业8 集大作业9 集大作业10 ) 0.评分规则: 按时交 - 有分,内容包括以下5个方面: Beta阶段敏捷冲 ...

  7. alpha-咸鱼冲刺day3-紫仪

    总汇链接 一,合照 emmmmm.自然还是没有的. 二,项目燃尽图 三,项目进展 今天把数据库的表给建好了,学长那边把登陆跟注册页面也做好了(纯页面,html5+css的那种) 四,问题困难   日常 ...

  8. 项目Alpha冲刺Day10

    一.会议照片 二.项目进展 1.今日安排 解决前后台联调问题,完善全局的请求和路由跳转处理,添加空文件完善路由信息,优化界面跳转等待.完成个人信息和修改密码.修改前台数据组织和方法调用方式.解决登录和 ...

  9. CoreAnimation注意事项

    最近调查的一个bug和内存泄露都和CoreAnimation有关,因此谈一下使用CoreAnimation需要注意的几个问题 CAAnimation的delegate属性是retain的,这个设计确实 ...

  10. Linux下I/O多路转接之select --fd_set

    fd_set 你终于还是来了,能看到这个标题进来的,我想,你一定是和我遇到了一样的问题,一样的疑惑,接下来几个小时,我一定竭尽全力,写出我想说的,希望也正是你所需要的: 关于Linux下I/O多路转接 ...