使用classList来实现两个按钮样式的切换方法


Posted in Javascript onJanuary 24, 2018

classList属性的方法:add();remove();toggle();

描述,在一些页面我们需要使用两个按钮来回切换,如图:

使用classList来实现两个按钮样式的切换方法

我们要使用到add()和remove()方法

html部分:

<div class="login-title">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="mya1" id="mya" onclick="myonclick()">注册</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="mya2" id="myaa" onclick="myonclick1()">登陆</a>
</div>

js部分:

funcction myonclick(){
document.getElementById("mya").classList.remove("newClassName1");
document.getElementById("myaa").classList.remove("newClassName");
}
function myonclick1(){
document.getElementById("mya").classList.add("newClassName1");
document.getElementById("myaa").classList.add("newClassName");
}

css部分:

.login-title{
width:200px;
height:200px;
margin: 0 auto;
background-color:antiquewhite;
}
.mya2{
padding: 0 20px 10px 20px;
color:#FFFFFF;
font-size:22px;
text-decoration:none;
}
.mya1{
padding:0 20px 10px 20px;
color:#7F4A88;
font-size:22px;
text-decoration:none;
border-bottom:2px solid #7F4A88;
}
.newClassName{
padding:0 20px 10px 20px;
color:#7F4A88;
font-size:22px;
text-decoration:none;
border-bottom:2px solid #7F4A88;
}
.newClassName1{
padding: 0 20px 10px 20px;
color:#FFFFFF;
font-size:22px;
text-decoration:none;
}

使用classList来实现两个按钮样式的切换方法

以上这篇使用classList来实现两个按钮样式的切换方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中extend函数的实现原理详解
Feb 03 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
Node.js安装配置图文教程
May 10 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 #Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 #Javascript
简述vue中的config配置
Jan 23 #Javascript
JS实现多物体运动的方法详解
Jan 23 #Javascript
JS运动改变单物体透明度的方法分析
Jan 23 #Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 #Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 #Javascript
You might like
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
python去除文件中重复的行实例
2018/06/29 Python
python保存文件方法小结
2018/07/27 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
Python3.5运算符操作实例详解
2019/04/25 Python
使用Python构造hive insert语句说明
2020/06/06 Python
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
租房协议书怎么写
2014/04/10 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python