需求：
当点击button按钮时，按钮的颜色改变，再次点击时，颜色还原。
最终效果图：
image.png
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<h3 style="text-align: center;color: #333333;margin-bottom: 10px">您目前的学历层次</h3>
<div style="text-align: center;">
<button style="width: 80px;height: 30px;border: none" id="degree" onclick="change()">本科及以上</button>
<button style="width: 75px;height: 30px;border: none" id="degree1" onclick="change1()">大专</button>
<button style="width: 75px;height: 30px;border: none" id="degree2" onclick="change2()">高中/中专</button>
<button style="width: 75px;height: 30px;border: none" id="degree3" onclick="change3()">初中以下</button>
</div>
</div>
</div>
<script>
var count=0;
function change(){
if(count==0){
document.getElementById('degree').style.backgroundColor='#FFA200';
count++;
}
else{
document.getElementById('degree').style.backgroundColor='#DDDDDD';
count=0;
}
}
var count_1=0;
function change1(){
if(count_1==0){
document.getElementById('degree1').style.backgroundColor='#FFA200';
count_1++;
}
else{
document.getElementById('degree1').style.backgroundColor='#DDDDDD';
count_1=0;
}
}
var count_2=0;
function change2(){
if(count_2==0){
document.getElementById('degree2').style.backgroundColor='#FFA200';
count_2++;
}
else{
document.getElementById('degree2').style.backgroundColor='#DDDDDD';
count_2=0;
}
}
var count_3=0;
function change3(){
if(count_3==0){
document.getElementById('degree3').style.backgroundColor='#FFA200';
count_3++;
}
else{
document.getElementById('degree3').style.backgroundColor='#DDDDDD';
count_3=0;
}
}
</script>
</body>
</html>
网友评论