先上效果图:

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

<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. 网格弹簧质点系统模拟(Spring-Mass System by Verlet Integration)附源码

    模拟物体变形最简单的方法就是采用弹簧质点系统(Spring-Mass System),由于模型简单并且实用,它已被广泛应用于服饰.毛发以及弹性固体的动态模拟.对于三角网格而言,弹簧质点系统将网格中的顶 ...

  2. 基于网格的波动方程模拟(Wave equation on mesh)附源码

    波动方程是偏微分方程 (PDE) 里的经典方程,它在物理学中有大量应用并经常用来解释空间中的能量传播.波动方程是一个依赖时间的方程,它解释了系统状态是如何随着时间的推移而发生变化.在下面模拟波动方程时 ...

  3. 网络之OSI&&TCP/IP比较

    共同点: 1.OSI和TCP/IP都采用了层次结构的概念 2.都能够提供面向链接(TCP)和无链接(UDP)两种通信服务机制 不同点: 1.前者7层,后者两层 2.对可靠性要求不同,TCP/IP要求高 ...

  4. C# Enum 进行逻辑运算

    Enum定义 enum 全称(Enumeration),即一种由一组称为枚举数列表的命名常量组成的独特类型. 通常情况下,最好是在命名空间內直接定义 enum,以便该命名空间中所有的类都能够同样方便地 ...

  5. [No000064]python 变量命名规范

    python源码和其他一些书籍,命名各种个性,没有一个比较统一的命名规范.于是总结了一些,供参考. 模块名: 模块应该使用尽可能短的.全小写命名,可以在模块命名时使用下划线以增强可读性.同样包的命名也 ...

  6. [No000037]操作系统Operating Systems操作系统历史与硬件概况History of OS & Summaries!

    培根:读史使人明智 操作系统的简史 (1955-1965) 计算机非常昂贵,上古神机IBM7094 ,造价在250万美元以上 计算机使用原则:只专注于计算 批处理操作系统(Batch system) ...

  7. oracle的substr函数的用法

    oracle的substr函数的用法 取得字符串中指定起始位置和长度的字符串   substr( string, start_position, [ length ] ) 如:     substr( ...

  8. HTML 学习笔记 CSS样式(链接)

    我们能够以不同的方法为链接设置样式. 设置链接的样式 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等).链接的特殊性在于能够根据它们 ...

  9. GridView EmptyDataTemplate 动态显示

    以下语句加在GridView.DataBind()之后: Table GridViewTable = ((Table)gvGridView.Controls[]); if (!isSearch) (( ...

  10. DEDECMS之二 如何修改模板页

    使用织梦系统最经常是为了仿站,那么模板应该怎么改? 这里主要谈谈关于比较常用的几个模板页 网站主页.列表页.内容页.栏目的调用 1.主页模板 常用组合方法:index.htm + head.htm + ...