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


Posted in Javascript onMay 07, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
JS基于面向对象实现的放烟花效果
May 07 #Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 #Javascript
javascript实现的图片切割多块效果实例
May 07 #Javascript
javascript中indexOf技术详解
May 07 #Javascript
javascript限制文本框输入值类型的方法
May 07 #Javascript
浅谈Javascript的静态属性和原型属性
May 07 #Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 #Javascript
You might like
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
文字幻灯片
2006/06/26 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
Python字符遍历的艺术
2008/09/06 Python
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
Foreo国际站:Foreo International
2018/10/29 全球购物
校长岗位职责
2013/11/26 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
寒假实习自荐信
2014/01/26 职场文书
公司口号大全
2014/06/11 职场文书
司机工作自我鉴定
2014/09/19 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
民事起诉状范文
2015/05/19 职场文书
初婚未育证明样本
2015/06/18 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
如何判断pytorch是否支持GPU加速
2021/06/01 Python
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js