效果图:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <style type="text/css"> input{ width: 80px; height: 30px; font-size:15px; border: none; background: #FFF0F5; outline:none; border-radius: 30%; } </style> <script type="text/javascript"> function bhcolor(a){ var bta=document.getElementById(a); bta.style.background="#FFC0CB"; for(var b=1;b<=4;b++){ if(b!=a){ var bta1=document.getElementById(b); bta1.style.background="#FFF0F5"; } } } </script> </head> <body> <input type="button" id="1" onclick="bhcolor(1)" value="策划部"> <input type="button" id="2" onclick="bhcolor(2)" value="销售部"> <input type="button" id="3" onclick="bhcolor(3)" value="后勤部"> <input type="button" id="4" onclick="bhcolor(4)" value="科技处"> </body> </html>