簡(jiǎn)單的JS控制button顏色隨點(diǎn)擊更改的實(shí)現(xiàn)方法
先上效果圖:
默認(rèn)“今日”是選中狀態(tài),是行內(nèi)樣式:
<button type="button" id="today" class="btn-link" onclick="todayDate()" style="color: #0062CC;">今日</button>
上面的日期都是點(diǎn)擊才會(huì)切換顏色:
點(diǎn)擊其它顏色,“今日”顏色更換成灰色
再次點(diǎn)擊“今日”,還原回默認(rèn)狀態(tài)顏色
在除“今日”外的其它任一個(gè)日期中添加一個(gè)點(diǎn)擊事件,可以實(shí)現(xiàn)【改變“今日”默認(rèn)顏色狀態(tài)】
在“今日”的點(diǎn)擊事件中添加【還原‘‘今日''的默認(rèn)狀態(tài)顏色】
//昨日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,完成
以上這篇簡(jiǎn)單的JS控制button顏色隨點(diǎn)擊更改的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript循環(huán)刪除數(shù)組中元素的幾種方法示例
這篇文章主要給大家介紹了關(guān)于Javascript循環(huán)刪除數(shù)組中元素的幾種方法,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-05-05createElement與createDocumentFragment的點(diǎn)點(diǎn)區(qū)別小結(jié)
在DOM操作里,createElement是創(chuàng)建一個(gè)新的節(jié)點(diǎn),createDocumentFragment是創(chuàng)建一個(gè)文檔片段2011-12-12layui字體圖標(biāo) loading圖標(biāo)靜止不旋轉(zhuǎn)的解決方法
今天小編就為大家分享一篇layui字體圖標(biāo) loading圖標(biāo)靜止不旋轉(zhuǎn)的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09javascript中substring()、substr()、slice()的區(qū)別
在js中字符截取函數(shù)有常用的三個(gè)slice()、substring()、substr()了,下面我來(lái)給大家介紹slice()、substring()、substr()函數(shù)在字符截取時(shí)的一些用法與區(qū)別吧。2015-08-085分鐘快速掌握J(rèn)S中var、let和const的異同
在javascript中有三種聲明變量的方式:var、let、const,這個(gè)是對(duì)新手們來(lái)說(shuō)應(yīng)該掌握的知識(shí),所以這篇文章主要給大家介紹了關(guān)于如何通過(guò)5分鐘快速掌握J(rèn)S中var,let和const的異同,需要的朋友可以參考下2018-09-09關(guān)聯(lián)的Select,可以支持客戶端動(dòng)態(tài)更新
關(guān)聯(lián)的Select,可以支持客戶端動(dòng)態(tài)更新...2006-09-09純前端使用ffmpeg實(shí)現(xiàn)視頻壓縮的具體方法及踩坑
這篇文章主要給大家介紹了關(guān)于純前端使用ffmpeg實(shí)現(xiàn)視頻壓縮的具體方法及踩坑,要在前端使用FFmpeg進(jìn)行視頻壓縮,你可以使用FFmpeg的JavaScript,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12為什么TypeScript的Enum會(huì)出現(xiàn)問(wèn)題
TypeScript引入了很多靜態(tài)編譯語(yǔ)言的特性,今天有一個(gè)類型需要著重討論下,這就是enum,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06