JQUERY实现的简单按钮轮换选中特效

稿源：互联网 2018-09-02 22:42:30 点击： 6147 撤稿纠错

使用JQUERY轻松实现效果，点击运行特效进行预览吧。

以下讨论的是和JQUERY 按钮轮换选中相关的JQUERY实现的简单按钮轮换选中特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html>
<head>
<title>按钮轮换点击效果</title>
<script type="text/javascript" src="http://www.alixixi.com/script/jquery-1.8.3.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){
 //alert(flag);
 //alert(obj.id);

 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://js.alixixi.com/a/2018090294468.shtml方便下次再访问哦。

·上一篇： 非常酷的左右无间隙文字切换选项卡特效代码
·下一篇： 类似手机左右滑动特效可用鼠标拖拽左右切换图片的特效代码

JQUERY实现的简单按钮轮换选中特效

文章分类LIST >>返回首页

最新游戏

最新新闻