jQuery 實現相同控制元件點選變色
阿新 • • 發佈：2019-01-06
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery 點選變色</title> </head> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <style> .mt10{margin-top:5px;} .hand{cursor:pointer;} .menu_city ul li{float:left; background:#CCC;padding:6px 20px; margin-right:1px;list-style:none;} .clearfix a li:hover{background-color: #FF00FF;} </style> <script> function getMoney(moudle){ var id= $(moudle).attr("id"); var a = document.getElementsByName("a"); for(var i=0;i<a.length;i++){ var item = a[i]; if($(item).attr("id")==id){ $(item).find("li").css("background-color","blue"); continue; } $(item).find("li").css("background-color","#CCC"); } } </script> <body class="index"> <div class="menu_city" > <ul class="clearfix"> <a href="javascript:void(0)" style="color:#FFFFFF;" id="a1" name="a" onclick="getMoney(this)"><li id="1">100</li></a> <a href="javascript:void(0)" style="color:#FFFFFF;" id="a2" name="a" onclick="getMoney(this)"><li id="2">300</li></a> <a href="javascript:void(0)" style="color:#FFFFFF;" id="a3" name="a" onclick="getMoney(this)"><li id="3">500</li></a> <a href="javascript:void(0)" style="color:#FFFFFF;" id="a4" name="a" onclick="getMoney(this)"><li id="4">1000</li></a> </ul> </div> </body> </html>