简单的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 ...
随机推荐
- 地铁 Dijkstra(优先队列优化) 湖南省第12届省赛
传送门:地铁 思路:拆点,最短路:拆点比较复杂,所以对边进行最短路,spfa会tle,所以改用Dijkstra(优先队列优化) 模板 /******************************** ...
- 转载 Appstore 上传被拒原因及解释
原 apps被拒绝的各种理由以及翻译 1. Terms and conditions(法律与条款) 2. Functionality(功能) 3. Metadata (name, descriptio ...
- Linux收集
1.rsync快速删除文件 rsync --delete -avH /empty /rmdir 选项说明: –delete-before 接收者在传输之前进行删除操作 –progress 在传输时显示 ...
- PHP程序设计
① 在设计评论系统时,关于文章的一些属性,我们最好存放在一个内存缓存中,通过下面的设计每次仅需要查询一次即可获取文章的所有属性 class CommentsDoc{ private static $d ...
- FSL - DualRegression
Source:http://fsl.fmrib.ox.ac.uk/fsl/fslwiki/DualRegression Research Overview A common need for anal ...
- 采用dlopen、dlsym、dlclose加载动态链接库【总结】(转)
1.前言 为了使程序方便扩展,具备通用性,可以采用插件形式.采用异步事件驱动模型,保证主程序逻辑不变,将各个业务已动态链接库的形式加载进来,这就是所谓的插件.linux提供了加载和处理动态链接库的系统 ...
- Linux shell基础
shell是核心程序kernel之外的指令解析器,是一个程序,同事是一种命令语言和程序设计语言 --shell是命令解析器,用户输入命令,它去解析. shell类型 ash,bash,ksh,csh, ...
- easyui layout 折叠后显示标题
(function($){ var buttonDir = {north:'down',south:'up',east:'left',west:'right'}; $.extend($.fn.layo ...
- Linux下C语言编程实现spwd函数
Linux下C语言编程实现spwd函数 介绍 spwd函数 功能:显示当前目录路径 实现:通过编译执行该代码,可在终端中输出当前路径 代码实现 代码链接 代码托管链接:spwd.c 所需结构体.函数. ...
- ubuntu-12.10-server安装图形界面
1.首先你需要确定你的源文件中 /etc/apt/sources.list 已经使用Universe和Multiverse库.然后使用下面的命令来进行更新源列表和安装图形桌面. sudo apt-ge ...