先上效果图:

默认“今日”是选中状态,是行内样式:

<button type="button" id="today" class="btn-link" onclick="todayDate()" style="color: #0062CC;">今日</button>

上面的日期都是点击才会切换颜色:

  1. 点击其它颜色,“今日”颜色更换成灰色
  2. 再次点击“今日”,还原回默认状态颜色
  • 在除“今日”外的其它任一个日期中添加一个点击事件,可以实现【改变“今日”默认颜色状态】
  • 在“今日”的点击事件中添加【还原‘‘今日’’的默认状态颜色】
//昨日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颜色随点击更改的更多相关文章

  1. js控制div颜色

    <html><head></head><style>#div1{width:400px;height:400px;background-color:re ...

  2. js控制button

    按钮变灰不可用方法:document.getElementById("crop").setAttribute("disabled", true); 按钮可用方法 ...

  3. 通过JS控制各种元素的点击事件的【时间间隔】,特别适合【发表评论】功能

    1.使用情景模拟:下单(防止用户无脑狂点).支付(防止用户无脑点击支付).发表评论(防止用户无脑点击),当然如果你用了一个提示框进行屏蔽,下面代码可以无视了,右上角谢谢. 2.默写情景比如:比如发表评 ...

  4. JS控制的事件

    鼠标点击弹出提示事件: <input type="button" value="鼠标点击弹出提示" onclick="DianJi()" ...

  5. js控制页面显示和表单提交

    早期的web页面在显示方面一般在后台进行控制,虽然对后台开发来讲是比较容易做到的,但是涉及到一个问题,那就是数据库压力. 因为要控制显示,所以会比较频繁的从数据库中来回调用. 现在的js功能越来越强, ...

  6. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  7. js控制TR的显示影藏

    在很多现实的场景中,有的文本框我们希望在选择“是”的按钮之后才出现,这就需要js控制TR的隐藏和显示,(div的影藏显示类似) 以下是一段选择是的按钮就显示身高和体重的文本框的代码.注意:ready方 ...

  8. js控制父子页面传值(iframe和window.open)

    在html中,window对象代表浏览器中一个打开的窗口,就像我们C/S中做窗体一样,在该页的window对象就是new了一个新的窗体对象. 就像做C/S开发一样,浏览器是一个软件,每一个网页都是它n ...

  9. 使用JS控制伪元素的几种方法

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...

随机推荐

  1. Codeforces Round #282 Div.1 B Obsessive String --DP

    题意: 给两个串S,T,问能找出多少的S的(a1,b1)(a2,b2)..(ak,bk),使Sa1---Sb1,...Sak---Sbk都包含子串T,其中k>=1,且(a1,b1)...(ak, ...

  2. POJ2184 Cow Exhibition[DP 状态负值]

    Cow Exhibition Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12420   Accepted: 4964 D ...

  3. JDK-Logger

    log4j的作者Ceki Gülcü在停止维护log4j后开始新的日志组件的开发,他的新作为日志门面slf4j以及log4j的替代品logback.不过logback至今还没有出1.0的正式版,所以使 ...

  4. [No000020]背单词提不起兴趣怎么办?

  5. PAT 1019. 数字黑洞 (20)

    给定任一个各位数字不完全相同的4位正整数,如果我们先把4个数字按非递增排序,再按非递减排序,然后用第1个数字减第2个数字,将得到一个新的数字.一直重复这样做,我们很快会停在有"数字黑洞&qu ...

  6. squid代理服务器根据代理IP路由

    import os ips = os.popen("""ifconfig |grep 'inet addr:'|awk '{print $2}'| sed '$d'| s ...

  7. WPF DatePicker默认显示当前日期

    WPF的日历选择控件默认为当前日期,共有两种方法,一种静态,一种动态. 静态的当然写在DatePicker控件的属性里了,动态的写在对应的cs文件里,具体请看下面.     1.方法一:     my ...

  8. (转)DataMatrix编码2——伽罗华域运算

    原文出处:http://blog.sina.com.cn/s/blog_4572df4e01019wsj.html 伽罗华域即有限域,RS编码在此域中进行运算,故不得不对其有所了解.DataMatri ...

  9. Linux 信号详解四(pause,alarm)

    pause函数 --将进程置为可中断睡眠状态,然后它调用内核函数schedule(),使linux进程调度器找到另一个进程来运行. --pause使调用者进程挂起,知道一个信号被捕获. alarm函数 ...

  10. Web服务器之iis,apache,tomcat三者之间的比较

    IIS-Apache-Tomcat的区别 IIS与Tomcat的区别 IIS是微软公司的Web服务器.主要支持ASP语言环境. Tomcat是Java Servlet 2.2和JavaServer P ...