JQUERY简单按钮轮换选中效果实现方法
本文实例讲述了JQUERY简单按钮轮换选中效果实现方法。分享给大家供大家参考。具体实现方法如下:
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>按钮轮换点击效果</title> <scripttype="text/javascript"src="jquery-1.6.2.min.js"></script> </head> <style> ulli{list-style-type:none;float:left;} </style> <body> <divstyle="position:absolute;top:6%;left:1%;"> <ulstyle="float:left"> <li><inputtype="button"id="but_1"value="呼入次数"onClick="showItem(this,'inc_call')"/></li> <li><inputtype="button"id="but_2"onClick="showItem(this,'inc_conn_call')"value="通话次数"/></li> <li><inputtype="button"id="but_3"onClick="showItem(this,'rate')"value="人工接听率"/></li> <li><inputtype="button"id="but_4"onClick="showItem(this,'inc_conn_call_20s')"value="20秒接听率"/></li> <li><inputtype="button"id="but_5"onClick="showItem(this,'inc_wait_duration')"value="等待均长"/></li> </ul> </div> </body> </html> <scripttype="text/javascript"> functionshowItem(obj,flag){ for(vari=1;i<=5;i++){ varbut_id="but_"+i; if("but_"+i==obj.id){ document.getElementById("but_"+i).style.border="2pxsolidblue"; }else{ document.getElementById("but_"+i).style.border="solid1px#999"; } } } </script>
希望本文所述对大家的jQuery程序设计有所帮助。