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 相关文章推荐
基于jquery的页面划词搜索JS
Sep 14 Javascript
jquery选择器使用详解
Apr 08 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
深入理解node.js http模块
Jan 24 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
js实现简单页面全屏
Sep 17 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 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
Symfony2安装的方法(2种方法)
2016/02/04 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python实现网络端口转发和重定向的方法
2016/09/19 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
多版本Python共存的配置方法
2017/05/22 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
追悼会上的答谢词
2014/01/10 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python
Java无向树分析 实现最小高度树
2022/04/09 Javascript