简单的JS控制button颜色随点击更改
先上效果图:

默认“今日”是选中状态,是行内样式:
<button type="button" id="today" class="btn-link" onclick="todayDate()" style="color: #0062CC;">今日</button>
上面的日期都是点击才会切换颜色:
- 点击其它颜色,“今日”颜色更换成灰色
- 再次点击“今日”,还原回默认状态颜色
- 在除“今日”外的其它任一个日期中添加一个点击事件,可以实现【改变“今日”默认颜色状态】
- 在“今日”的点击事件中添加【还原‘‘今日’’的默认状态颜色】
//昨日click
function yesterdayDate() {
document.getElementById('title').value = getYesterdayDate(new Date());
fetYesterdayData();
today.css('color','#555555');
}
//今日click
function todayDate() {
document.getElementById('title').value = formatterDateStr(new Date());
fetTodayData();
today.css('color','#0062cc');
}
OK,完成
简单的JS控制button颜色随点击更改的更多相关文章
- js控制div颜色
<html><head></head><style>#div1{width:400px;height:400px;background-color:re ...
- js控制button
按钮变灰不可用方法:document.getElementById("crop").setAttribute("disabled", true); 按钮可用方法 ...
- 通过JS控制各种元素的点击事件的【时间间隔】,特别适合【发表评论】功能
1.使用情景模拟:下单(防止用户无脑狂点).支付(防止用户无脑点击支付).发表评论(防止用户无脑点击),当然如果你用了一个提示框进行屏蔽,下面代码可以无视了,右上角谢谢. 2.默写情景比如:比如发表评 ...
- JS控制的事件
鼠标点击弹出提示事件: <input type="button" value="鼠标点击弹出提示" onclick="DianJi()" ...
- js控制页面显示和表单提交
早期的web页面在显示方面一般在后台进行控制,虽然对后台开发来讲是比较容易做到的,但是涉及到一个问题,那就是数据库压力. 因为要控制显示,所以会比较频繁的从数据库中来回调用. 现在的js功能越来越强, ...
- js控制页面的全屏展示和退出全屏显示
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
- js控制TR的显示影藏
在很多现实的场景中,有的文本框我们希望在选择“是”的按钮之后才出现,这就需要js控制TR的隐藏和显示,(div的影藏显示类似) 以下是一段选择是的按钮就显示身高和体重的文本框的代码.注意:ready方 ...
- js控制父子页面传值(iframe和window.open)
在html中,window对象代表浏览器中一个打开的窗口,就像我们C/S中做窗体一样,在该页的window对象就是new了一个新的窗体对象. 就像做C/S开发一样,浏览器是一个软件,每一个网页都是它n ...
- 使用JS控制伪元素的几种方法
一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...
随机推荐
- UVALive 4997 ABCD Tiles --DFS
题意: NxN的地图,上面有A颜色的瓷砖以及一些空格点,要用B,C,D颜色去填充这些空格,只能十字形的填充,还要保证共角或共边的格子不能是相同颜色,求一种字典序最小的填充方法,如果不能,输出" ...
- 【转载】SweetAlert2 使用
SweetAlert2是一款功能强大的纯Js模态消息对话框插件.SweetAlert2用于替代浏览器默认的弹出对话框,它提供各种参数和方法,支持嵌入图片,背景,HTML标签等,并提供5种内置的情景类, ...
- 深入C#数据类型
一:值类型与引用类型 值类型源于System.ValueType家族,值类型包括基本数据类型,结构类型和枚举类型. 值类型:在栈上储存的真实的值. 引用类型源于System.Object家族,在C#中 ...
- maven总结5
上篇文章中项目最终发布的release仓库和快照仓库都是nexus的默认仓库,若所有的本地开发项目版本都发布到同一个仓库,可能会造成冲突.因此,我们可以为每一个项目创建一组仓库(快照版本和releas ...
- webpack常用加载器和插件
css文件加载器: style-loader,css-loader,sass-loader,less-loader //style和css加载器必须放在一起使用,且style必须放前面(style!c ...
- Centos5, 6下更改系统时间和时区
http://www.namhuy.net/2435/how-to-change-date-time-timezone-on-centos-6.html 查看日期(使用 -R 参数会以数字显示时区) ...
- Java核心技术点之反射
1. 概述 Java 反射是可以让我们在运行时获取类的方法.属性.父类.接口等类的内部信息的机制.也就是说,反射本质上是一个“反着来”的过程.我们通过new创建一个类的实例时,实际上是由Java虚拟机 ...
- Codevs 1860 最大数 string大法好,STL万岁。。
题目描述 Description 设有n个正整数(n≤20),将它们联接成一排,组成一个最大的多位整数. 输入描述 Input Description 第一行一个正整数n. 第二行n个正整数,空格隔开 ...
- Post model至Web Api
Post model可以解决多动态性的参数至Web Api中去,获取数据或是创建数据.如果一个对象有很多字段,需要对每一个字段进行查询或是在创建对象时,我们可以考虑使用model来作参数.这样不必在控 ...
- scala 学习笔记(02) 元组Tuple、数组Array、Map、文件读写、网页抓取示例
package yjmyzz import java.io.PrintWriter import java.util.Date import scala.io.Source object ScalaA ...