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

    

解决办法: 结合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. 不可思议的纯CSS导航栏下划线跟随效果

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  2. python实现的txt目录树

    首先,我先表述一下我的需求: 我记笔记比较乱,但我比较容易"半途而废".文件夹很多,但大都只有一两个文件.... 所以我需要一种方式,能在不逐个打开文件夹的前提下,"看到 ...

  3. Wannafly交流赛1(施工中)

    A.有理数 签到题:直接用floor函数就行了,详细看代码 #define debug #include<stdio.h> #include<math.h> #include& ...

  4. js中非死循环引起的栈调用溢出问题

    一般情况下,仅从代码上看只要不出现死循环,是不会出现堆栈调用溢出的.但是某些情况下列外,比如下面这段代码: var a = 99; function b (){ a --; if (a > 0) ...

  5. 有序的map LinkedHashMap

    HashMap是无序的,HashMap在put的时候是根据key的hashcode进行hash然后放入对应的地方.所以在按照一定顺序put进HashMap中,然后遍历出HashMap的顺序跟put的顺 ...

  6. Struts2学习笔记五 拦截器

    拦截器,在AOP中用于在某个方法或字段被访问之前,进行拦截,然后在之前或之后加入某些操作.拦截是AOP的一种实现策略. Struts2中,拦截器是动态拦截Action调用的对象.它提供了一种机制可以使 ...

  7. git中级技能

    中级技能(上)               一.实验说明 从本节开始,我们会介绍一些中级和高级的用法,这些用法很少用到,前面三节的内容已经满足了日常工作需要,从本节开始的内容可以简单了解,需要的时候再 ...

  8. 完美解决某法院HP EVA8400删除VDISK问题

    [故障描述] 某地法院一台HP EVA8400存储,2组扩展柜,物理磁盘由12个1T FATA磁盘(AG691A 454414-001)和10个300G 15K FC磁盘(AG690A 454411- ...

  9. python3+beautifulSoup4.6抓取某网站小说(四)多线程抓取

    上一篇多文章,是二级目录,根目录"小说",二级目录"作品名称",之后就是小说文件. 本篇改造了部分代码,将目录设置为根目录->作者目录->作品目录- ...

  10. iot前台开发环境:搭建 SpringBoot+angularJs2

    参考网站 Angular 中文官网:https://angular.cn/ 参考代码:https://ng.ant.design/#/components/dropdown  npm install ...