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 相关文章推荐
js 字符串操作函数
Jul 25 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
javascript几个易错点记录
Nov 26 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
Angular 应用技巧总结
Sep 14 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 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的知识
2006/11/17 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
js中replace的用法总结
2013/12/27 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
python图片验证码生成代码
2016/07/02 Python
利用Python破解斗地主残局详解
2017/06/30 Python
python实现剪切功能
2019/01/23 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
临床护士自荐信
2014/01/31 职场文书
分公司经理任命书
2014/06/05 职场文书
初中学生操行评语
2014/12/26 职场文书
2015年电工工作总结
2015/04/10 职场文书
房贷工资证明范本
2015/06/12 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技