JQUERY简单按钮轮换选中效果实现方法

前端技术 2023/08/10 JavaScript

本文实例讲述了JQUERY简单按钮轮换选中效果实现方法。分享给大家供大家参考。具体实现方法如下：

<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>按钮轮换点击效果</title>
<script type=\"text/javascript\" src=\"jquery-1.6.2.min.js\"></script>
</head>
<style>
 ul li{list-style-type:none;float:left;}
</style>
<body>
 <div style=\"position:absolute;top:6%;left:1%; \">
  <ul style=\"float:left\">
  <li><input type=\"button\" id=\"but_1\" value=\"呼入次数\" onClick=\"showItem(this,\'inc_call\')\" /> </li>
  <li><input type=\"button\" id=\"but_2\" onClick=\"showItem(this,\'inc_conn_call\')\" value=\"通话次数\" /> </li>
  <li><input type=\"button\" id=\"but_3\" onClick=\"showItem(this,\'rate\')\" value=\"人工接听率\" /> </li>
  <li><input type=\"button\" id=\"but_4\" onClick=\"showItem(this,\'inc_conn_call_20s\')\" value=\"20秒接听率\" /> </li>
  <li><input type=\"button\" id=\"but_5\" onClick=\"showItem(this,\'inc_wait_duration\')\" value=\"等待均长\" /> </li>
  </ul>
 </div>
</body>
</html>
<script type=\"text/javascript\">
function showItem(obj,flag){
 for(var i=1;i<=5;i++){
 var but_id = \"but_\"+i;
 if( \"but_\"+i == obj.id ){
  document.getElementById(\"but_\"+i).style.border =\"2px solid blue\";
 }else{
  document.getElementById(\"but_\"+i).style.border =\"solid 1px #999\";
 }
 }
}
</script>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/857

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案