这篇文章主要介绍了JS中如何实现控制button颜色随点击更改功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
先上效果图:
默认“今日”是选中状态,是行内样式:
<button type="button" id="today" class="btn-link" onclick="todayDate()" >今日</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颜色随点击更改功能”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。