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 相关文章推荐
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
JS中Attr的用法详解
Oct 09 Javascript
node实现基于token的身份验证
Apr 09 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
viewer.js实现图片预览功能
Jun 24 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
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python实现多线程采集的2个代码例子
2014/07/07 Python
python打开网页和暂停实例
2014/09/30 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
浅析Python基础-流程控制
2016/03/18 Python
Python selenium 三种等待方式解读
2016/09/15 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
python3中rank函数的用法
2019/11/27 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
python中append函数用法讲解
2020/12/11 Python
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
班主任对学生的评语
2014/04/26 职场文书
销售人才自我评价范文
2014/09/27 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书