编程 Javascript

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程序设计有所帮助。

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Cookie 注入是怎样产生的

Apr 08 Javascript

Javascript this指针

Jul 30 Javascript

如何确保JavaScript的执行顺序之jQuery.html并非万能钥匙

Mar 03 Javascript

input禁止键盘及中文输入,但可以点击

Feb 13 Javascript

jquery超简单实现手风琴效果的方法

Jun 05 Javascript

Javascript基础回顾之(一) 类型

Jan 31 Javascript

node.js入门学习之url模块

Feb 25 Javascript

Javascript实现信息滚动效果

May 18 Javascript

javascript兼容性(实例讲解)

Aug 15 Javascript

JavaScript实现图片本地预览功能【不用上传至服务器】

Sep 20 Javascript

详解在express站点中使用ejs模板引擎

Sep 21 Javascript

js实现拖拽与碰撞检测

Sep 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