使用addClass和removeClass完成内容切换

作者：吱韩菌
开发工具：Visual Studio 2015
撰写时间：2019-6-5

今天要给大家展示的是使用addclass和removeclass在页面中完成内容切换。当点击“编辑”按钮时，从第一个table内容切换到第二的table内容。第二个table内容给它添加了d-none,是dispay：none的简写，是插件中封装的方法，它的作用是隐藏内容。

在js部分，首先要获取“编辑“按钮的ID cEdit，layer.alert(1314),当点击按钮时弹出提示框，则获取成功（这一步看似多余，但却是关键，假如不做这一步，后面代码写得再花里胡哨，没有获取到ID，都是做无用功）。成功获取ID后，就要给两个table加效果了，我们的目的是点击”编辑“按钮然后切换table内容，为了实现这个效果，我做的是执行点击事件的同时也执行它里面的两句代码，(cEditor1和cEditor2是两个table的ID) removeClass的作用是消除css类，而addClass则是添加类，下面两句代码可以理解为：消除隐藏table中的d-none的同时也给已经显示的table中添加隐藏属性d-none。$(this).text(“完成”);
的作用是把“编辑“切换成”完成“
$(“#cEditor2”).removeClass(“d-none”);
$(“#cEditor1”).addClass(“d-none”);
$(this).text(“完成”);

当js中的事件写完后就可以启动页面看效果，如上图，当点击编辑时切换内容，但这里只有一次效果，点击后虽然能切换table内容，但是无法切换回来，下面我们还需要做的功能是点击能够相互切换。在这里我为了实现这个效果，给它加了If判断。首先是给Text申明变量，通过if判断Text中的文本值是否等于“完成“，不等于”完成“时则执行if中的方法，否则就执行else。

如果要多做几个这样的点击事件切换table内容，就要写多个点击事件和if判断，会增加代码量，为了减少代码量，接下来要给大家讲解下面的封装方法。

jk(“cEdit”, “cEditor1”, “cEditor2”);对应的是function jk(a,b,c)
通过$(“#”+a)调用每个编辑按钮的ID；b和c对应的就是两个table标签中的ID，这样封装，可以有效减少代码量，也可以继续添加相同类型的事件。

使用addClass和removeClass完成内容切换相关推荐

jquery中的class函数addClass，removeClass，toggle，hasClass
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery通过class函数操作元素样式 jquery的class函数,包括addClass,removeClas ...
jQuery addClass，removeClass，class属性增删
效果图,添加.移除class属性上代码: <!DOCTYPE html> <html><head><meta charset="UTF-8&quo ...
怎么把一个控件放到tab页面上去?_移动端页面内容切换
# 移动端页面内容切换上周做了一个和页面切换相关的需求,为了探寻在需求场景下最符合用户心理模型的交互方式,当时一共输出了有四五种方案.总结一下各种切换页面内容的方式的特点和他们适用的场景.## 一. ...
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换
vue2.0使用嵌套路由实现页面跳转切换/公用一级菜单控制页面内容切换/routes配置children demo需求分析: 图中菜单区域为header公用组件,点击相应的菜单选项跳转到对应的路由,在 ...
微信小程序开发4——利用自定义组件实现页面内容切换功能
首先展示一下要显示的功能:` 首先需要在开发者工具中新建一个文件夹(components),分别在文件夹中新建.js .json .wxml .wxcss四个文件(可以右键文件夹,选择新建新建(com ...
addClass和removeClass的用法
一个需求中需要用到样式的改变,自然想到了addClass和removeClass,但是在用的犯了一个很低级的错误,导致纠结了半天. 初始写法(错误写法): if (isPlayMusic) {cons ...
css实现点击内容切换div
相信很多小伙伴都看过,点击切换内容技术,今天我们简单说一下在不用js的情况下实现内容切换. html代码: css代码: 完成效果: 源代码如下: 有用的到的地方可以直接复制代码,可以直接使用哦~也可 ...
02属性操作_jqueryCSS类操作(addClass()、removeClass()、toggleClass())
02属性操作_jqueryCSS类操作(addClass().removeClass().toggleClass()) 代码演示 <!DOCTYPE html> <html>& ...
MacOS开发-带有动画的窗口内容切换
MacOS开发-带有动画的窗口内容切换 1.切换窗口内容效果根据需求,窗口内容需要切换,且要求带有动画效果.实现效果如下图所示: 2.实现思路:程序只有一个window,通过在window的con ...
js 左右箭头实现图片或div内容切换
js 左右箭头实现图片或div内容切换js 左右箭头实现图片或div内容切换js 左右箭头实现图片或div内容切换js 左右箭头实现图片或div内容切换js 左右箭头实现图片或div内容切换js 左右 ...

使用addClass和removeClass完成内容切换

使用addClass和removeClass完成内容切换相关推荐

最新文章

热门文章