简单的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 ...
随机推荐
- JS 中如何判断字符串类型的数字
function isNumberStr(str){ var n = Number(str); return !isNaN(n); } console.log(isNumberStr('37')); ...
- JavaScript Number 对象
JavaScript Number 对象 Number 对象 Number 对象是原始数值的包装对象. Number 创建方式 new Number(). 语法 var num = new Numbe ...
- wk_04
函数 函数是对程序逻辑进行结构化或过程化的一直编程方法.能将整块代码巧妙的隔离成易于管理的小块,把重复代码放到函数中而不是进行大量的拷贝--这样既能节省空间,也有助于保持一致性,因为你只需要改变单个的 ...
- 编译php-5.6出错,xml2-config not found
今天在centos上编译PHP-5.6 cd php-5.6 ./configure --prefix=/usr/local/php5./ --with-apxs2=/usr/local/apache ...
- CSS3中的Rem值与Px之间的换算
bootstrap默认 html{font-size: 10px;} rem是一个相对大小的值,它相对于根元素<html>, 比如假设,我们设置html的字体大小的值为html{font- ...
- 使用JavaScript打印网页指定DIV区域
JavaScript打印函数myPrint(obj): JavaScript打印页面指定div区域原理:使用window.open()在浏览器打开一个新的页面(window), 使用 window.d ...
- C语言 memset函数盲点
#include <stdio.h> #include <stdlib.h> #include <string.h> struct packet { int len ...
- 前端见微知著AngularJS备忘篇:温故而知新,可以为师矣
话说以前JQuery刚出来的时候,真的是对个人的冲击蛮大的.记得当时我买的第一本书就是<锋利的JQuery>,藉由这本书开始,我从此以后的项目基本用上了JQuery,其给我带来的便利性是不 ...
- es6+移动轮播插件
前言:之前赶项目,都是直接用框架,对于touch事件是模拟两可,趁着有心情,用es6写一个原生移动轮播插件. 用了es6的新特性,确实挺爽的,说到es6,就不得不说到babel,博主已经码好了,直接用 ...
- PRML读书会第五章 Neural Networks(神经网络、BP误差后向传播链式求导法则、正则化、卷积网络)
主讲人 网神 (新浪微博:@豆角茄子麻酱凉面) 网神(66707180) 18:55:06 那我们开始了啊,前面第3,4章讲了回归和分类问题,他们应用的主要限制是维度灾难问题.今天的第5章神经网络的内 ...