使用classList来实现两个按钮样式的切换方法
作者:ZMONE 时间:2024-04-16 09:35:19
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;
}
来源:https://www.cnblogs.com/ZM-ONE/archive/2018/01/23/8337403.html
标签:使用classList来实现两个按钮样式的切换
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
史上最简单的MySQL数据备份与还原教程(中)(三十六)
2024-01-24 08:40:56
![](https://img.aspxhome.com/file/2023/2/75652_0s.png)
很无聊的一个找碴游戏
2008-07-02 13:10:00
SQL提高查询效率之Like篇
2011-10-01 09:36:42
Linux中将txt导入到mysql的方法教程
2024-01-12 13:04:27
浅谈为什么Mysql数据库尽量避免NULL
2024-01-14 10:40:54
如何在python中实现ECDSA你知道吗
2023-03-14 14:07:17
![](https://img.aspxhome.com/file/2023/5/110045_0s.jpg)
Oracle SQL性能优化系列学习一
2010-07-26 13:14:00
ASP XML操作类代码
2011-03-08 10:47:00
Javascript查看大图功能代码实现
2024-04-22 13:03:46
Python文件操作的方法
2022-10-27 19:54:29
![](https://img.aspxhome.com/file/2023/8/107938_0s.jpg)
MySQL数据库的自动备份与数据库被破坏后的恢复
2010-03-18 15:30:00
ORACLE常见错误代码的分析与解决三
2010-07-26 13:28:00
使用python实现飞机大战游戏
2021-05-11 12:02:16
![](https://img.aspxhome.com/file/2023/1/97111_0s.jpg)
Python局部函数及用法详解(含nonlocal关键字)
2023-07-26 05:02:52
Python金融数据可视化汇总
2023-04-12 21:27:41
![](https://img.aspxhome.com/file/2023/3/75133_0s.png)
vue地区选择组件教程详解
2023-07-02 16:49:48
python PyQt5 爬虫实现代码
2022-10-19 20:24:42
![](https://img.aspxhome.com/file/2023/3/86623_0s.jpg)
PHP之数组学习
2024-05-02 17:35:43
基于Python编写一个简单的端口扫描器
2021-09-19 09:21:22
![](https://img.aspxhome.com/file/2023/4/110454_0s.jpg)
python 实现二维列表转置
2021-04-20 10:00:06