button按钮颜色切换
发布日期:2021-10-12 20:07:52
浏览次数:12
分类:技术文章
本文共 3945 字,大约阅读时间需要 13 分钟。
先看看效果图:
简单粗暴上干货
button.html 页面
button.js
flag = "btn1"; function btn(num){ if(num == 1){ document.getElementById(flag).style.color = "#0065cf"; document.getElementById(flag).style.backgroundColor = "white"; document.getElementById("btn1").style.color = "white"; document.getElementById("btn1").style.backgroundColor = "#0065cf"; flag = "btn1"; } if(num == 2){ document.getElementById(flag).style.color = "#0065cf"; document.getElementById(flag).style.backgroundColor = "white"; document.getElementById("btn2").style.color = "white"; document.getElementById("btn2").style.backgroundColor = "#0065cf"; flag = "btn2"; } if(num == 3){ document.getElementById(flag).style.color = "#0065cf"; document.getElementById(flag).style.backgroundColor = "white"; document.getElementById("btn3").style.color = "white"; document.getElementById("btn3").style.backgroundColor = "#0065cf"; flag = "btn3"; } if(num == 4){ document.getElementById(flag).style.color = "#0065cf"; document.getElementById(flag).style.backgroundColor = "white"; document.getElementById("btn4").style.color = "white"; document.getElementById("btn4").style.backgroundColor = "#0065cf"; flag = "btn4"; } if(num == 5){ document.getElementById(flag).style.color = "#0065cf"; document.getElementById(flag).style.backgroundColor = "white"; document.getElementById("btn5").style.color = "white"; document.getElementById("btn5").style.backgroundColor = "#0065cf"; flag = "btn5"; } if(num == 6){ document.getElementById(flag).style.color = "#0065cf"; document.getElementById(flag).style.backgroundColor = "white"; document.getElementById("btn6").style.color = "white"; document.getElementById("btn6").style.backgroundColor = "#0065cf"; flag = "btn6"; } if(num == 7){ document.getElementById(flag).style.color = "#0065cf"; document.getElementById(flag).style.backgroundColor = "white"; document.getElementById("btn7").style.color = "white"; document.getElementById("btn7").style.backgroundColor = "#0065cf"; flag = "btn7"; } if(num == 8){ document.getElementById(flag).style.color = "#0065cf"; document.getElementById(flag).style.backgroundColor = "white"; document.getElementById("btn8").style.color = "white"; document.getElementById("btn8").style.backgroundColor = "#0065cf"; flag = "btn8"; } if(num == 9){ document.getElementById(flag).style.color = "#0065cf"; document.getElementById(flag).style.backgroundColor = "white"; document.getElementById("btn9").style.color = "white"; document.getElementById("btn9").style.backgroundColor = "#0065cf"; flag = "btn9"; } }
create.css
.inputcss{ border: 1px #9f9f9f solid; height: 24px; line-height: 24px; width: 205px; padding-left: 5px; color: #ccc;}.spancss{ padding: 5px 10px; font-size: 14px;}.buttoncss{ outline: none; padding: 5px 15px; margin-left: 10px; background: none; color: #0065cf; border: #0065cf 1px solid; border-radius: 3px; cursor: pointer;} .buttoncss_on{ background: #0065cf; color: #FFFFFF; border: #0065cf 1px solid;}.tab{ width: 100%; font-family: "微软雅黑"; border:0;}.tab .trcss{ height: 44px; color:#333; border-bottom: #dedede 1px solid;}.tab .thcss{ font-weight: normal;}.tab .tdcss{ font-size:14px;}
如果效果还可以不忘点赞评论啊
转载地址:https://blog.csdn.net/qq_39772439/article/details/88990994 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过按个爪印,很不错,赞一个!
[***.219.124.196]2024年03月25日 21时10分05秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
拉格朗日matlab编程例题,Matlab习题讲解.doc
2019-04-21
case是不是php语言关键字,PHP语言 switch 的一个注意点
2019-04-21
linux php mkdir失败,linux – mkdir错误:参数无效
2019-04-21
config.php渗透,phpMyAdmin 渗透利用总结
2019-04-21
c语言枪图形,6个变态的C语言Hello World程序[转载]
2019-04-21
郑州大学c语言课程设计2000行,C语言课程设计大作业(1).pptx
2019-04-21
android 程序更换字体,Android修改自己程序字体的方法详解
2019-04-21
c语言4x4矩形列互换,线反转法4x4键盘C语言程序问题.急...
2019-04-21
android 6.0 蓝牙进程,Android6.0-蓝牙权限问题
2019-04-21
wxml修改样式_[笔记]小程序支持的样式选择器
2019-04-21
banner 获取当前指示物_学会这些技巧,让你的banner脱颖而出
2019-04-21
线上banner什么意思_广交会线上直播怎么做
2019-04-21
获取默认值_TarsGo 服务获取自定义模版(配置)值
2019-04-21
启动rocketmq_rocketmq 部署启动指南-Docker 版
2019-04-21
热敏打印_热敏打印机需要碳带吗?
2019-04-21
点击屏幕触发_Flutter 中文文档:点击、拖动和其他手势
2019-04-21