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

    

解决办法: 结合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. 蚂蚁金服安全实验室首次同时亮相BlackHat Asia 以及CanSecWest国际安全舞台

    近期,蚂蚁金服巴斯光年安全实验室(以下简称AFLSLab)同时中稿BlackHat Asia黑帽大会的文章以及武器库,同时在北美的CanSecWest安全攻防峰会上首次中稿Android安全领域的漏洞 ...

  2. linux --> fork()详解

    fork()详解 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同,两个 ...

  3. Hibernate学习(4)- Hibernate对象的生命周期

    1.Hibernate对象的生命周期(瞬时状态.持久化状态.游离状态) 1.瞬时状态(Transient): 使用new操作符初始化的对象就是瞬时状态,没有跟任何数据库数据相关联:2.持久化状态(Pa ...

  4. 使用Github pages+jekyll搭建自己的博客(windows版)

    最近突发奇想,想试试GitHub pages来搭建博客.网上一搜一大堆,嗯...看来还是挺简单的...于是自己撸起袖子干...... 结果对于我这种GitHub注册过,git 没用过,ruby.jek ...

  5. HTML 样式设计

    1.自动设置外边距 style="margin:auto auto;"

  6. JAVA_SE基础——67.System类

    System类对大家都不陌生吧! 以前经常需要打印结果时使用的都是"System.out.println()"语句,这句代码中就使用了System类.System类定义了一些与系统 ...

  7. php的函数参数按照从左到右来赋值

    PHP 中自定义函数参数赋默认值 2012-07-07 13:23:00|  分类: php自定义函数,默|举报|字号 订阅     下载LOFTER我的照片书  |     php自定义函数接受参数 ...

  8. 分布式版本控制系统Git的安装及使用

    Git的安装分为客户端安装和服务端安装,鉴于我平时码代码在windows环境下,因此本文客户端安装直接在windows环境,服务端安装在linux环境下(centos). Git客户端安装 客户端下载 ...

  9. vue组件详解(三)——组件通信

    组件之间通信可以用下图表示: 组件关系可分为父子组件通信.兄弟组件通信.跨级组件通信. 一.自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件. 子组件用$emit ()来触发事件,父组件 ...

  10. MySQL中使用sql语句获得表结构

    最近在研究PHP,那么就必须涉及到mysql.其中一个功能通过表数据自动生成页面,紧接着发现在一张空表中无法读取数据(因为人家刚刚新建,就是空的没有数据) 延伸出来便是直接查表结构获得字段名,再进行处 ...