jquery实现可自动收缩的TAB网页选项卡代码
本文实例讲述了jquery实现可自动收缩的TAB网页选项卡代码。分享给大家供大家参考。具体如下:
这是一款可自动收缩的TAB选项卡网页代码,当把鼠标放在标签上的时候,标签所属的内容自动展开,鼠标移走或移到其它标签的时候,选项卡自动收缩隐藏起来,第二个选项卡伸展开来,动画效果挺流畅,不错的网页特效。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-hidden-show-tab-cha-nav-menu-codes/
具体代码如下:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tab选项卡,自动伸缩代码</title> <script type="text/javascript" src="jquery1.3.2.js"></script> <style type="text/css"> body,h1,div,ul,li{ margin:0; padding:0;} li{ list-style:none;} .demo{ width:300px; margin:30px auto; position:relative;} .demo li{ float:left; padding:0 15px; cursor:pointer; height:30px; line-height:30px;} .d-bk{} .demo li.cur{ background-color:#F00; color:#FFF;} .demo li .d-bk{ border:1px solid #F00; width:300px; height:150px; background-color:#f1f1f1; position:absolute; left:0; top:30px; color:#333;display:none;} </style> <script type="text/javascript"> $(document).ready(function(){ $(".demo li").hover(function(){ $(this).addClass("cur"); $(this).children(".d-bk").slideDown(); }).mouseout(function(){ $(".demo li").removeClass("cur"); $(this).children(".d-bk").slideUp(); }) }) </script> </head> <body> <ul class="demo"> <li> aaaa <div class="d-bk">111</div> </li> <li> bbbb <div class="d-bk">222</div> </li> <li> cccc <div class="d-bk">333</div> </li> </ul> </body> </html>
希望本文所述对大家的jquery程序设计有所帮助。
相关推荐
-
jQuery实现仿腾讯迷你首页选项卡效果代码
本文实例讲述了jQuery实现仿腾讯迷你首页选项卡效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的选项卡,清爽无修饰版,仿腾讯的迷你首页.选项卡的前后可以有一个控件箭头,点击这两个箭头可控件选项卡向左.向右滚动,在有限的网页空间内布局更多的内容成为可能,相信你会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-t-tencent-index-style-nav-codes/ 具体代码如下: <!DOCT
-
jQuery超简单选项卡完整实例
本文实例讲述了jQuery实现的超简单选项卡效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的选项卡示例,比较实用的一个实例,希望通过本文让大家掌握如何使用jQuery创建一个选项卡标签,这是目前WEB前端设计比较流行的一款功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-nav-cha-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT
-
jquery实现经典的淡入淡出选项卡效果代码
本文实例讲述了jquery实现经典的淡入淡出选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的Tab选项卡代码,带有淡入淡出效果,jquery插件实现,希望大家能够喜欢,界面未做美化.感兴趣的朋友可以优化一下 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-jd-fade-in-out-style-tab-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
-
jquery实现通用的内容渐显Tab选项卡效果
本文实例讲述了jquery实现通用的内容渐显Tab选项卡效果.分享给大家供大家参考.具体如下: 这是一款网页常用的TAB选项卡功能,无鼠标操作的时候它可以自动轮换,美化一般,看上去有些粗糙,有兴趣使用的朋友可以进行细致修饰,相信会更漂亮的. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-info-tab-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X
-
jquery实现超简洁的TAB选项卡效果代码
本文实例讲述了jquery实现超简洁的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款超简洁的TAB选项卡,个人觉得有点太简单,简单的有点不习惯,美化修饰一下其实效果更好.实际上应该为点击过的TAB添加一个背景色,区分一下,这样比较好. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-easy-tab-cha-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C
-
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果.分享给大家供大家参考.具体如下: 这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写,另外还加入了圆角,都是参考以前学习的知识写的.期间使用了jquery-1.6.2.min.js框架库. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n
-
jQuery实现滚动切换的tab选项卡效果代码
本文实例讲述了jQuery实现滚动切换的tab选项卡效果代码.分享给大家供大家参考.具体如下: 这里介绍的jquery tab选项卡滚动动态切换代码,似乎很个性的网页选项卡,没有边框的修饰,但十分简约大方,选项卡菜单目前在各大网站很流行,做为前端设计者,能够得心应手的写出一个选项卡是很有必要的哦,希望本代码能为您带去一份参考资料. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-cha-tab-nav-style-
-
jquery简单实现带渐显效果的选项卡菜单代码
本文实例讲述了jquery简单实现带渐显效果的选项卡菜单代码.分享给大家供大家参考.具体如下: 带渐显效果的选项卡菜单,使用了jQuery共同完成的效果,鼠标点击选项卡之后,出现渐变(淡入淡出效果),让网页看上去更生动. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-cha-style-tab-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
-
jquery实现可自动收缩的TAB网页选项卡代码
本文实例讲述了jquery实现可自动收缩的TAB网页选项卡代码.分享给大家供大家参考.具体如下: 这是一款可自动收缩的TAB选项卡网页代码,当把鼠标放在标签上的时候,标签所属的内容自动展开,鼠标移走或移到其它标签的时候,选项卡自动收缩隐藏起来,第二个选项卡伸展开来,动画效果挺流畅,不错的网页特效. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-hidden-show-tab-cha-nav-menu-codes/ 具体代码如下:
-
jquery实现邮箱自动填充提示功能
邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 核心代码(需要jquery的支持): (function($){ $.fn.mailAutoComplete = function(options){ var defaults = { boxClass: "mailListBox", //外部box样式 listClass: "
-
JQuery搜索框自动补全(模糊匹配)功能实现示例
本地实现了一个搜索框自动补全的小功能,在JQuery UI的autocomplete插件的基础上,加入了自己的业务代码,贴出来回顾一下,同时可以给大家一个参考 首先贴出的是JQuery Ui 的自动补全插件部分的代码,后面的功能都是在其基础上追加的,直接拷贝到你的本地就可以直观的看到运行效果,也可以到官网上面体验和查看,为了方便,我这里是直接引入的JS链接点击下载JQuery UI的源码 <!doctype html> <html lang="en"> <
-
jQuery网页选项卡插件rTabs用法实例分析
本文实例讲述了jQuery网页选项卡插件rTabs用法.分享给大家供大家参考.具体如下: 这里介绍jQuery网页选项卡插件rTabs用法,一共演示了4种TAB选项卡样式,第一种:默认样式:自动运行.无动画效果.Hover事件:第二种:自动运行.向上滚动.支持Hover事件的TAB选项卡菜单:第三种:自动运行.渐入淡出.支持Hover事件的选项卡:第四种:自动运行.向左滚动.点击事件的网页选项卡,选一个你喜欢的放在你的网站吧. 先来看看运行效果截图: 在线演示地址如下: http://demo.
-
JS实现自动定时切换的简洁网页选项卡效果
本文实例讲述了JS实现自动定时切换的简洁网页选项卡效果.分享给大家供大家参考.具体如下: 这是一款简洁人网页选项卡,与其它TAB不同的是,本选项卡是自动切换的,在变量里设定选项卡的内容.切换时间等,它就开始工作了,如果可以响应鼠标的动作就更完美了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-auto-ds-web-menu-demo/ 具体代码如下: <html> <head> <title>自动切换的选项卡
-
jQuery实现文本展开收缩特效
在网页上只有一个小区域,但是说明性的文字又很长,下面这段脚本实现的是长文字的部分显示. 当用户点击展开时,文字展开,收缩时文字收缩. 本来用jQuery自带的toggle()就可以写,但是我做的时候 toggle一直不work,所以就用了click + 标志位来做的 <script language="javascript" src="jquery.js"></script> <script language="javascr
-
jQuery简单实现网页选项卡特效
CSS: 复制代码 代码如下: .clear{clear:both; height:0px; overflow:hidden;} .tab{width:400px; font-size:12px;} .tab_menu ul{padding:0px;margin:0px;} .tab_menu li{list-style:none; display:block; float:left; background:#C2CEFE;
-
自己动手制作jquery插件之自动添加删除行功能介绍
这是一个我认为功能基本完善的插件,它包括添加.删除.插入.上下移动.索引标识. 数量控制等功能,基本上能满足大部分多行添加的需求,当然,在完成这些功能的前提下,我也尽量保持较少的代码量和易理解的逻辑性. 这个插件的演示页面是http://www.lovewebgames.com/demo/autoAdd/autoAdd.html ,引用自己动手制作jquery插件之自动添加删除行(上)里的介绍,这是一个简单的插件,它的作用是:一个系统中有大量的需要对一个行进行复制添加,希望能够进行批量的操作时,
-
jQuery如何跳转到另一个网页 就这么简单
平时我们在Javaweb的开发的过程中,现在还是大都使用jQuery,毕竟当时红极一时,虽然现在有点跟不上时代了,但毕竟还是很主流的.程序员最爱的一张图. 所以了,今天我们就来说一说如何在jQuery中跳转到另外一个网页HTML. 其实下面我列举的几种方法也不一定都是用jQuery,也有的使用了Javascript的原生的方法,所以也算是前端跳转的一个总结吧. 我们可以利用http的重定向来跳转 window.location.replace("http://www.jb51.net"
随机推荐
- Vue.js计算属性computed与watch(5)
- Javascript的表单验证-初识正则表达式
- oracle sequence语句重置方介绍
- JavaScript中的object转换成number或string规则介绍
- js随机生成网页背景颜色的方法
- 分享十款最出色的PHP安全开发库中文详细介绍
- Knockout text绑定DOM的使用方法
- 网页设计中的 serif 和 sans-serif字体应用
- 深入学习JavaWeb中监听器(Listener)的使用方法
- Python基于pygame模块播放MP3的方法示例
- Linux中tcpdump命令实例详解
- Python使用PyCrypto实现AES加密功能示例
- 关于JAVA 数组的使用介绍
- PHP 危险函数全解析
- LintCode 堆化详解及实例代码
- 详解java中接口与抽象类的区别
- java爬取并下载酷狗TOP500歌曲的方法
- tensorflow saver 保存和恢复指定 tensor的实例讲解
- SQL Server基础之行数据转换为列数据
- linux定时备份mysql并同步到其它服务器