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


解决办法: 结合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之间的切换的更多相关文章
- Android两个页面之间的切换效果工具类
import android.annotation.SuppressLint; import android.app.Activity; import android.content.Context; ...
- iOS 两个应用之间的切换
A 跳到B NSURL *urlT = [NSURL URLWithString:@"TestB://XXXXXXX"]; //注意“://”后面可以任意传参数.这些参数传过去后当 ...
- Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)
前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...
- DOM的小练习,两个表格之间数据的移动
本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head> <meta http-equiv="Content-Type" ...
- IOS关于UIViewController之间的切换
IOS关于UIViewController之间的切换 1.NavigationController切换UIViewController的两种方式 方法一右侧进入 1 SecondViewControl ...
- Objective-C ,ios,iphone开发基础:多个视图(view)之间的切换2,使用导航栏控制,以及视图之间传值。
首先需要说明的是每个应用程序都是一个window,背景色为黑色.在window上可以跑多个view进行来回切换,下面就通过手动写代码来体现导航栏切换view的原理. 第一步,新建一个single vi ...
- 多个Activity之间的切换与数据交互
总结 两个activity之间切换我概括的分为两步: 1. 代码实现切换操作.2.配置中声明另外一个acitivity! 1. 代码实现切换操作 显示定义一个intent 对象,Intent 这个类的 ...
- 如何解决两个li之间的缝隙
如何解决两个li之间的缝隙的问题: 在做一个类似按钮左右滑动的选择器的动效,遇到了个是关于li之间的缝隙的问题: HTML如下: <span class="c1mChanger&quo ...
- Android -- 两个activity界面的切换, 显示Intent 和 隐式Intent,putExtra传递数据
1. 两个Activity之间可以通过Intent切换, 包括显示Intent 和 隐式Intent. 实例代码 MainActivity.java public class MainActivity ...
随机推荐
- Algorithm --> 判读是否是子树
问题 判断一棵树是否是另一棵树的子树,如图 思路 问题分两步: 找值相同的根结点(遍历解决) 判断两结点是否包含(递归:值.左孩子.右孩子分别相同) 树节点定义 struct TreeNode { i ...
- java设计模式------工厂设计模式
总结 以上就是工厂模式的基本实现和详细说明.包括了简单工厂模式.工厂方法模式.抽象工厂模式.我们可以基于需求来选择合适的工厂模式 基本概念:为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来 ...
- [poj3254]Corn Fields_状压dp
Corn Fields poj3254 题目大意:给你一个n*m的地,每一块地可以种或不种,两块种过的地不能挨着,可以一块都不种,问所有的种地方案数. 注释:读入用0和1,1<=n,m<= ...
- Axure RP初学
制作商品购买页
- js和jquery实现显示隐藏
(选择的重要性) 当点击同一个按钮的时候实现显示影藏 <a id="link" class="b-btn-four task-resolve add-sub-tas ...
- java基础笔记(2)----流程控制
java流程控制结构包括顺序结构,分支结构,循环结构. 顺序结构: 程序从上到下依次执行,中间没有任何判断和跳转. 代码如下: package com.lvsling.test; public cla ...
- 2017年PHP程序员未来路在何方——韩天峰
PHP 从诞生到现在已经有20多年历史,从Web时代兴起到移动互联网退潮,互联网领域各种编程语言和技术层出不穷, Node.js . GO . Python 不断地在挑战 PHP 的地位.这些技术的推 ...
- python元类理解2
恩,对元类理解又有新的收获,其实类似于装饰器,只不过装饰器是修饰函数,元类用来定制一个类. 代码如下,这是一个使用了函数做元类传递给类: input: def upper_attr(class_nam ...
- Django+xadmin打造在线教育平台(十)
十四.xadmin的进阶开发 14.1.权限管理 (1)用户权限 超级用户拥有所有权限,其它添加的用户默认没有任何权限 进后台添加一个用户“Editor1”,勾上“职员状态”后,这个用户才可以登录进后 ...
- 用Python满足满足自己的“小虚荣”
首先声明,学习这个只是为了好玩,只是为了好玩,并不是想用这个弄虚作假,做一些不好的事情!一心想做技术人,自制自治! 我们有时候发布一篇日志,或者是一篇博文,总希望自己的浏览量能高点,这样看起来也倍有面 ...