css按钮样式实例(CSS使用classList实现两个按钮样式的切换)
类别:Web前端 浏览量:817
时间:2022-03-28 09:09:32 css按钮样式实例
CSS使用classList实现两个按钮样式的切换classList属性的方法:add();remove();toggle();
描述,在一些页面我们需要使用两个按钮来回切换,如图:
我们要使用到add()和remove()方法
html部分:
<li 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> </li>
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; }
总结
以上所述是小编给大家介绍的CSS使用classList实现两个按钮样式的切换,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
您可能感兴趣
- vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
- mysql的binlog日志详解(MySQL 有关MHA搭建与切换的几个错误log汇总)
- jQuery实现tab切换
- ubuntu python3.7安装(详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本)
- vue获取图片并展示(vue卡片式点击切换图片组件使用详解)
- vue 手机端tab切换页面不刷新(vue Tab切换以及缓存页面处理的几种方式)
- js竖屏切换程序(js判断移动端横竖屏视口检测实现的几种方法)
- laravel数据库切换(实现laravel 插入操作日志到数据库的方法)
- mysql高可用集群(MySQL之高可用集群部署及故障切换实现)
- vue用于动态切换组件的内置组件(Vue 可拖拽组件Vue Smooth DnD的使用详解)
- vue移动端图片放大效果实现(vue实现图片切换效果)
- vue elementui侧边栏怎么切换页面(Vue + element实现动态显示后台数据到options的操作方法)
- 宝塔面板php能切换吗(BT宝塔面板更换网站PHP版本)
- css导航栏字怎么分开设置(纯CSS实现导航栏Tab切换效果)
- vue功能测试和生产环境切换(vue 单元测试的推荐插件和使用示例)
- css导航条怎么做(CSS实现导航条Tab切换的三种方法介绍)
- 今天要吃什么(今天要吃什么菜)
- 三杨之一 南杨 杨溥 安贞履节,酿醴调羹,宰相之气(三杨之一南杨杨溥)
- 今天会下雨吗(今天会下雨吗小说)
- 追连续剧,品古今联4 明代三杨,联妙诗佳(追连续剧品古今联4)
- 三杨 共辅四朝帝王,构建明帝国内阁行政圈(三杨共辅四朝帝王)
- 红色文化进国企(红色文化进国企)
热门推荐
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- dedecms的简单说明(DEDECMS5.5在国外Linux主机下无法采集的解决方法)
- 宝塔面板与php(宝塔面板如何安装PHP扩展)
- html表单星号怎么标记(使用CSS 给表单必选项添加星号的实现方法)
- pandas删除特定条件的行(pandas删除指定行详解)
- 怎么看mysql有没有外键约束(MySQL外键约束的实例讲解)
- linux内核设备树(解析Linux内核与设备树的编译和烧写)
- mysql优化使用方法(详解Mysql函数调用优化)
- 微信开发接口文档地址
- dedecms添加广告栏(DEDECMS中让文章标题栏突破60个字符的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9