使用classList来实现两个按钮样式的切换
classList属性的方法:add();remove();toggle();
描述,在一些页面我们需要使用两个按钮来回切换,如图:
我们要使用到add()和remove()方法
html部分:
<div class="login-title">
<a href="javascript:void(0)" class="mya1" id="mya" onclick="myonclick()">注册</a>
<a href="javascript:void(0)" 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;
}
最新文章
- python 多进程使用总结
- jQuery源码分析系列(30) : Ajax 整体结构
- div
- SSH整合开发的web.xml配置
- 配置自己的OpenGL库,glew、freeglut库编译,库冲突解决(附OpenGL Demo程序)
- 用js判断页面刷新或关闭的方法
- Asp.Net Core-几行代码解决Razor中的嵌套if语句
- JavaScript eval() 函数
- Django1.9开发博客(12)- i18n国际化
- CSS之圣杯布局与双飞翼布局
- composer 安装使用
- BZOJ 1001 &; SPFA
- Android Volley 框架的使用(一)
- sqlplus将查询结果重定向到文件,不输出到屏幕
- Kafka - SQL 引擎
- doubango(2)--底层协议栈结构分析
- 安装VUE Cli3 框架方法
- Python3 网络爬虫(请求库的安装)
- mpeg4文件分析(纯c解析代码)
- MVC和普通三层架构的区别
热门文章
- oracle dblink简介
- [转]ASP.NET Core基本原理(11)-管理应用程序状态
- 检测SQL Server表占用空间大小SQL
- 使用Git(msysgit)和TortoiseGit上传代码到GitHub
- [MySQL] - MySQL连接字符串总结
- My first python application
- 设计模式之职责链模式(JAVA实现)
- Docker 创建镜像、修改、上传镜像
- Spring课程 Spring入门篇 5-3 配置切入点 pointcut
- Celery-------周期任务