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 相关文章推荐
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
node实现简单的增删改查接口实例代码
Aug 22 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
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
dess中一个简单的多路委托的实现
2010/07/20 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
详解Python文本操作相关模块
2017/06/22 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
高考自主招生自荐信
2013/10/20 职场文书
医学生自荐信
2013/12/03 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers