jquery实现可自动收缩的TAB网页选项卡代码


Posted in Javascript onSeptember 06, 2015

本文实例讲述了jquery实现可自动收缩的TAB网页选项卡代码。分享给大家供大家参考。具体如下:

这是一款可自动收缩的TAB选项卡网页代码,当把鼠标放在标签上的时候,标签所属的内容自动展开,鼠标移走或移到其它标签的时候,选项卡自动收缩隐藏起来,第二个选项卡伸展开来,动画效果挺流畅,不错的网页特效。

运行效果截图如下:

jquery实现可自动收缩的TAB网页选项卡代码

在线演示地址如下:

具体代码如下:

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

Javascript 相关文章推荐
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
js中的this关键字详解
Sep 25 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
vue实现固定位置显示功能
May 30 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
JS如何监听div的resize事件详解
Dec 03 Javascript
react中的DOM操作实现
Jun 30 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 #Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 #Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 #Javascript
浅谈javascript函数式编程
Sep 06 #Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 #Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 #Javascript
简单谈谈javascript Date类型
Sep 06 #Javascript
You might like
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
Python中非常实用的一些功能和函数分享
2015/02/14 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
详解python分布式进程
2018/10/08 Python
python跳出双层for循环的解决方法
2019/06/24 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
一套Delphi的笔试题二
2013/05/11 面试题
门诊挂号室室长岗位职责
2013/11/27 职场文书
旅游网创业计划书
2014/01/31 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
作风建设整改方案
2014/10/27 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android