简单的JS控制button颜色随点击更改

最新推荐文章于 2024-08-05 04:49:43 发布

weixin_34112900

最新推荐文章于 2024-08-05 04:49:43 发布

阅读量1.2k

点赞数 1

文章标签： javascript ViewUI

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个日期选择器的交互效果，包括默认选中状态、颜色变化以及点击事件的响应。通过定义不同的日期按钮，并为每个按钮设置点击事件，用户可以轻松切换日期，同时保持界面的美观与易用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图：

默认“今日”是选中状态，是行内样式：

<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');
}