成都网站建设设计

将想法与焦点和您一起共享

JS中如何实现控制button颜色随点击更改功能

这篇文章主要介绍了JS中如何实现控制button颜色随点击更改功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

我们提供的服务有:网站建设、成都网站设计、微信公众号开发、网站优化、网站认证、秀英ssl等。为上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的秀英网站制作公司

先上效果图:

JS中如何实现控制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中如何实现控制button颜色随点击更改功能
网站网址:http://chengdu.cdxwcx.cn/article/gpsosd.html