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 相关文章推荐
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
js opener的使用详解
Jan 11 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 Javascript
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下载CSS文件中的图片的代码
2013/09/24 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
python 二维数组90度旋转的方法
2019/01/28 Python
深入理解Django-Signals信号量
2019/02/19 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
Python selenium自动化测试模型图解
2020/04/15 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
《最大的“书”》教学反思
2014/02/14 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
Django基础CBV装饰器和中间件
2022/03/22 Python