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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Java 生成二维码
下一篇:properites配置文件与它的工具类

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.219.124.196]2024年03月25日 21时10分05秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

php foreach 数据库,php – 使用foreach将数据库检索的数据排列在HTML表中 2019-04-21
拉格朗日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
java list 合并 重复的数据_Java ArrayList合并并删除重复数据3种方法 2019-04-21
c语言枪图形,6个变态的C语言Hello World程序[转载] 2019-04-21
郑州大学c语言课程设计2000行,C语言课程设计大作业(1).pptx 2019-04-21
Android5.1自定义闹钟铃声,Android 设置来电铃声、通知铃声、闹钟铃声中的坑 2019-04-21
android 程序更换字体,Android修改自己程序字体的方法详解 2019-04-21
c语言4x4矩形列互换,线反转法4x4键盘C语言程序问题.急... 2019-04-21
android服务开启线程,android之service与intentService的不同 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