JS實現(xiàn)按鈕顏色切換效果
更新時間：2020年09月05日 09:27:34 作者：spfLinux
這篇文章主要為大家詳細介紹了JS實現(xiàn)按鈕顏色切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了使用參數(shù)函數(shù)實現(xiàn)按鈕顏色切換的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn1" onclick="btn(1)">按鈕1</button>
<button id="btn2" onclick="btn(2)">按鈕2</button>
<button id="btn3" onclick="btn(3)">按鈕3</button>
<script>
//設(shè)置背景顏色
//如果設(shè)置參數(shù)函數(shù)會節(jié)省函數(shù)數(shù)量吧
//設(shè)置flag+參數(shù)函數(shù)
flag = "btn1";
function btn1(){
document.getElementById("btn2").style.color = "black";
document.getElementById("btn3").style.color = "black";
document.getElementById("btn1").style.color = "red";
}
function btn2(){
document.getElementById("btn1").style.color = "black";
document.getElementById("btn2").style.color = "red";
document.getElementById("btn3").style.color = "black";
}
function btn3(){
document.getElementById("btn1").style.color = "black";
document.getElementById("btn2").style.color = "black";
document.getElementById("btn3").style.color = "red";
}
function btn(num){
if(num == 1){
document.getElementById(flag).style.color = "black";
document.getElementById(flag).style.backgroundColor = "white";
document.getElementById("btn1").style.color = "red";
document.getElementById("btn1").style.backgroundColor = "blue";
flag = "btn1";
}
if(num == 2){
document.getElementById(flag).style.color = "black";
document.getElementById(flag).style.backgroundColor = "white";
document.getElementById("btn2").style.color = "red";
document.getElementById("btn2").style.backgroundColor = "blue";
flag = "btn2";
}
if(num == 3){
document.getElementById(flag).style.color = "black";
document.getElementById(flag).style.backgroundColor = "white";
document.getElementById("btn3").style.color = "red";
document.getElementById("btn3").style.backgroundColor = "blue";
flag = "btn3";
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了微信小程序使用車牌號輸入法的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
本文主要介紹了基本DOM節(jié)點操作，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
在web開發(fā)中我們經(jīng)常各種各樣的需求。今天小編給大家介紹JS區(qū)分瀏覽器頁面是刷新還是關(guān)閉標簽頁，非常實用，感興趣的童鞋參考下吧2016-04-04
本文主要介紹了js中hasOwnProperty()方法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
Swiper是移動端的一款非常強大的觸摸滑動插件。下面通過本文給大家分享JS中Swiper的使用和輪播圖效果，感興趣的的朋友一起看看吧2017-08-08
這篇文章主要介紹了20多個小事例帶你重溫ES10新特性(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
JavaScript詳細分析數(shù)據(jù)類型和運算符
這篇文章主要介紹了JavaScript數(shù)據(jù)類型和運算符案例,結(jié)合實例形式分析了JavaScript數(shù)據(jù)類型和運算符特性與相關(guān)操作技巧,需要的朋友可以參考下2022-07-07
小程序怎樣讓wx.navigateBack更好用的方法實現(xiàn)
這篇文章主要介紹了小程序怎樣讓wx.navigateBack更好用的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
BootStrap實現(xiàn)響應(yīng)式布局導航欄折疊隱藏效果（在小屏幕、手機屏幕瀏覽時自動折疊隱藏）
這篇文章主要介紹了BootStrap實現(xiàn)導航欄的響應(yīng)式布局，當在小屏幕、手機屏幕瀏覽時自動折疊隱藏的效果，非常不錯，具有參考借鑒價值,對bootstrap 響應(yīng)式布局導航欄功能感興趣的朋友一起學習吧2016-11-11
這篇文章主要為大家詳細介紹了js注入，黑客之路必備！本文告訴大家什么是js注入，如何進行js注入攻防，感興趣的小伙伴們可以參考一下2016-09-09