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 相关文章推荐
理解JSON:3分钟课程
Oct 28 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
基于JS实现视频上传显示进度条
May 12 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的Yii框架中扩展的安装与使用
2016/04/01 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
如何利用python进行时间序列分析
2020/08/04 Python
python 高阶函数简单介绍
2021/02/19 Python
Otel.com:折扣酒店预订
2017/08/24 全球购物
财务人员个人自荐信范文
2013/09/26 职场文书
单位领导证婚词
2014/01/14 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
体育教师求职信
2014/06/30 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
goland 清除所有的默认设置操作
2021/04/28 Golang
Vue监视数据的原理详解
2022/02/24 Vue.js