JS中如何实现控制button颜色随点击更改功能-创新互联

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

成都创新互联公司是一家专业提供厦门企业网站建设,专注与网站设计制作、网站制作、HTML5、小程序制作等业务。10年已为厦门众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

先上效果图:

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颜色随点击更改功能”这篇文章对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站建设公司行业资讯频道,更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前题目:JS中如何实现控制button颜色随点击更改功能-创新互联
网站路径:http://ybzwz.com/article/ccjdee.html