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程序设计有所帮助。
相关推荐
-
jquery 轮换显示 第一小个例子
效果如下图所示:虽然是看了示例之后自己在写的 (就当是给自己一个鼓励吧 加油!) jquery 复制代码 代码如下: $(document).ready(function(){ var h3=$(".accordion h3"); $(".accordion h3:eq(0)").addClass("active");//1.首先获取第一个H3标签添加class: $(".accordion p:gt(0)").hide();
-
jquery 图片轮换效果
效果图:代码中存在的错误欢迎大家指正 复制代码 代码如下: /** * @author leepood * @title 图片自动轮换效果 * @version v2.0 * @E-Mail leepood@gmail.com * @notice:要显示图片的数目可以在setting里调整,但需要在imagesArray中加入相应图片的参数 */ function changeImages() { var setting={ 'width':'330px', 'height':'200px',
-
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实现图片广告轮换效果代码
效果图:实现代码: 复制代码 代码如下: <!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实现简单的轮换出现效果实例
本文实例讲述了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的热点内容轮换效果
效果图:核心代码: 复制代码 代码如下: <div class="blockB" collection="Y" > <h2><span>王牌栏目 Regular features</span></h2> <div id="regular_features" class="pp"> <div class="tabs"> <
-
Jquery 实现图片轮换
网站首页没有一点动画怎么可以,我以前用过Flash As3做过图片切换,效果非常不错,可是麻烦,改变起来麻烦.一直都想自己做个图片切换效果,总认为比较麻烦,今天自己实践了一下,其实还比较简单.不过有个小问题,IE8不兼容模式下 设置有透明效果的div 样式添加失效了,但是我用谷歌,IE8兼容测试都ok. 反正是给自己记录的,也不多话了,js没有与页面分离,也没有做出插件.一个网站要不了几个这种效果,先实现了再说吧.最后的效果还是很高大上的. 页面+JS代码 复制代码 代码如下: <script
-
JQuery分屏指示器图片轮换效果实例
本文实例讲述了JQuery分屏指示器图片轮换效果实现方法.分享给大家供大家参考.具体分析如下: 在Web App大行其道的今天,分屏指示器用得非常广泛,从Android.到腾讯的Web OS等等.分屏指示器给人很好的用户体验,下面就实现一个分屏指示器,用于实现图片的简单轮换效果,仅抛砖引玉- 代码如下: <script type="text/javascript"> var curr = 0, next = 0, count = 0; $(document).ready(f
-
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简单实现遍历单选框的方法.分享给大家供大家参考,具体如下: 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=&
随机推荐
- spring动态bean注册示例分享
- Linux下启动Oracle服务和监听程序步骤
- Oracle删除表及查看表空间的实例详解
- js获取时间并实现字符串和时间戳之间的转换
- PHP防CC攻击实现代码
- php模拟socket一次连接,多次发送数据的实现代码
- vue2.0开发实践总结之疑难篇
- php foreach 使用&(与运算符)引用赋值要注意的问题
- 你应该知道的21个Java核心技术
- Js+php实现异步拖拽上传文件
- python 图片验证码代码分享
- JQuery判断checkbox是否选中及其它复选框操作方法合集
- 浅谈Java 三种方式实现接口校验
- Android RollPagerView实现轮播图
- 菜鸟必看网络名词
- Centos系统下“无法打开并写入文件”问题的解决
- 解决Android studio 2.3升级到Android studio 3.0 后apt报错问题
- spring boot使用sharding jdbc的配置方式
- 利用vue-i18n实现多语言切换效果的方法
- WebView的介绍与简单实现Android和H5互调的方法