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

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

赞 (0)

相关推荐

  • 基于jquery的热点内容轮换效果

    基于jquery的热点内容轮换效果

    效果图:核心代码: 复制代码 代码如下: <div class="blockB" collection="Y" > <h2><span>王牌栏目 Regular features</span></h2> <div id="regular_features" class="pp"> <div class="tabs"> <

  • 基于jquery实现图片广告轮换效果代码

    基于jquery实现图片广告轮换效果代码

    效果图:实现代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

  • Jquery 实现图片轮换

    网站首页没有一点动画怎么可以,我以前用过Flash As3做过图片切换,效果非常不错,可是麻烦,改变起来麻烦.一直都想自己做个图片切换效果,总认为比较麻烦,今天自己实践了一下,其实还比较简单.不过有个小问题,IE8不兼容模式下 设置有透明效果的div 样式添加失效了,但是我用谷歌,IE8兼容测试都ok. 反正是给自己记录的,也不多话了,js没有与页面分离,也没有做出插件.一个网站要不了几个这种效果,先实现了再说吧.最后的效果还是很高大上的. 页面+JS代码 复制代码 代码如下: <script

  • jquery实现简单的轮换出现效果实例

    本文实例讲述了jquery实现简单的轮换出现效果.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

  • jquery 轮换显示 第一小个例子

    jquery 轮换显示 第一小个例子

    效果如下图所示:虽然是看了示例之后自己在写的 (就当是给自己一个鼓励吧 加油!) jquery 复制代码 代码如下: $(document).ready(function(){ var h3=$(".accordion h3"); $(".accordion h3:eq(0)").addClass("active");//1.首先获取第一个H3标签添加class: $(".accordion p:gt(0)").hide();

  • jquery 图片轮换效果

    jquery 图片轮换效果

    效果图:代码中存在的错误欢迎大家指正 复制代码 代码如下: /** * @author leepood * @title 图片自动轮换效果 * @version v2.0 * @E-Mail leepood@gmail.com * @notice:要显示图片的数目可以在setting里调整,但需要在imagesArray中加入相应图片的参数 */ function changeImages() { var setting={ 'width':'330px', 'height':'200px',

  • JQuery分屏指示器图片轮换效果实例

    本文实例讲述了JQuery分屏指示器图片轮换效果实现方法.分享给大家供大家参考.具体分析如下: 在Web App大行其道的今天,分屏指示器用得非常广泛,从Android.到腾讯的Web OS等等.分屏指示器给人很好的用户体验,下面就实现一个分屏指示器,用于实现图片的简单轮换效果,仅抛砖引玉- 代码如下: <script type="text/javascript"> var curr = 0, next = 0, count = 0; $(document).ready(f

  • Jquery的Tabs内容轮换效果实现代码,几行搞定

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title>Jque

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

    本文实例讲述了JQUERY简单按钮轮换选中效果实现方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>按钮轮换点击效果</title> <script type="text/javascript" src=

  • jquery简单实现图片切换效果的方法

    本文实例讲述了jquery简单实现图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • jQuery简单实现title提示效果示例

    本文实例讲述了jQuery简单实现title提示效果的方法.分享给大家供大家参考,具体如下: /* 调用示例: $(document).ready(function(){ $('.quicktip').quberTip({ speed:200 }); }); <a href='' class='quicktip' title='Information about this link'>desktop publishing</a> */ jQuery.fn.quberTip = fu

  • jQuery实现转动随机数抽奖效果的方法

    本文实例讲述了jQuery实现转动随机数抽奖效果的方法.分享给大家供大家参考.具体实现方法如下: <!Doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <script src="jquery-1.6.2.min.js" type="text/jav

  • jQuery简单实现遍历单选框的方法

    jQuery简单实现遍历单选框的方法

    本文实例讲述了jQuery简单实现遍历单选框的方法.分享给大家供大家参考,具体如下: 1.问题背景: 有四个单选框,分别为一年四季,现在需要判断是否选中,如果选中这个单选框,就将其值赋值给输入框 2.实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>遍历单选框</title> <script type="text/ja

  • jQuery简单实现上下,左右滑动的方法

    本文实例讲述了jQuery简单实现上下,左右滑动的方法.分享给大家供大家参考,具体如下: 渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白 我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了. 闲话不多说,上码 //isw2 zhouxianglh 2010.07.07 //移动ul var slideOperate = { slideUlId : "",//UL id 用于操作Ul fadeInTime : 2000

  • jQuery定义背景动态切换效果的方法

    本文实例讲述了jQuery定义背景动态切换效果的方法.分享给大家供大家参考.具体如下: 通过下面的jQuery插件,你可以将图片放在一个数组里,然后告诉jQuery图片需要在什么地方背景轮换 (function($){ var defaultSettings; var divfg, divbg; var fadeInterval; var fqTimer; var currImg = 0; var displImg = 0; var running = false; // Setup setti

  • Jquery简单实现GridView行高亮的方法

    本文实例讲述了Jquery简单实现GridView行高亮的方法.分享给大家供大家参考.具体实现方法如下: $("#gridID tr:not(tr:last-child)").filter(function () { return $('td', this).length && !('table', this).length }).hover(function () { $(this).toggleClass('hover_css'); }); 希望本文所述对大家的jQ

  • javascript简单实现滑动菜单效果的方法

    本文实例讲述了javascript简单实现滑动菜单效果的方法.分享给大家供大家参考.具体如下: 整个javascript代码共42行,其中主要函数Slide代码26行,可以改进哦! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

随机推荐