How to implement JS control button color to change with click

The following editor will bring you a simple JS control button color change method with clicks. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

First, the renderings:

The default is "Today" It is the selected state and the in-line style:

<button type="button" id="today" class="btn-link" onclick="todayDate()" style="color: #0062CC;">今日</button>

The above dates will switch colors only when clicked:

Click on other colors, "Today" "Change the color to gray

Click "Today" again to restore the default state color

Add a click event to any other date except "Today" to achieve [Change" "Today" default color status】

Add [Restore the default status color of "Today"] in the click event of "Today"

//昨日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, complete

The above is the detailed content of How to implement JS control button color to change with click. For more information, please follow other related articles on the PHP Chinese website!