使用classList来实现两个按钮样式的切换方法
2018-01-24 08:34
801 查看
classList属性的方法:add();remove();toggle();
描述,在一些页面我们需要使用两个按钮来回切换,如图:
我们要使用到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来实现两个按钮样式的切换方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- HTML5: element.classList API实例:简易样式控切换按钮
- Android编程实现两个Activity相互切换而不使用onCreate()的方法
- HTML5: element.classList API实例:简易样式控切换按钮
- jquery 点击按钮切换样式on方法使用
- 如何使用一个按钮实现两个功能
- 自定义字段在List和ClassList等标签里的使用方法
- jquery之修改元素样式(添加和删除类名称,使用addClass(),removeClass(),toggleClass()方法)
- 使用两个IP实现IIS和Apache公用80端口的方法
- 写student类中的select,delete,update,insert方法并在objectDataSource中应用(分别写两个,一个返回datatable,一个使用list)
- Android 一个按钮两次单击触发两个不同事件并实现两个View在同一界面切换
- 写student类中的select,delete,update,insert方法并在objectDataSource中应用(分别写两个,一个返回datatable,一个使用list)
- .写student类中的select,delete,update,insert方法并在objectDataSource中应用(分别写两个,一个返回datatable,一个使用list
- VB.net 在一个From 关闭后切换到另一From 实现方法,并加载XP视觉样式
- 使用ShellClass获取文件属性详细信息的实现方法
- 1.写student类中的select,delete,update,insert方法并在objectDataSource中应用(分别写两个,一个返回datatable,一个使用list)
- 两个按钮执行同一事件方法但执行不同代码的使用
- 使用JavaScript实现CheckBoxList单选两种方法
- 写student类中的select,delete,update,insert方法并在objectDataSource中应用(分别写两个,一个返回datatable,一个使用list)
- OpenJWeb快速开发平台使用struts2实现多语切换的方法
- repeater实现样式设置,并添加删除按钮,参考课上老师做的案例。数据表添加字段status,使用repeater实现禁用与启用。repeater添加编辑按钮,和Edit.aspx页面。