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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
拖动一个HTML元素
Dec 22 Javascript
小试JQuery的AutoComplete插件
May 04 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
Node.js学习入门
Jan 03 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 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
PHP4引用文件语句的对比
2006/10/09 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
培养自己的php编码规范
2015/09/28 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
python根据日期返回星期几的方法
2015/07/06 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
Mac安装python3的方法步骤
2019/08/09 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
扩大国家免疫规划实施方案
2014/03/21 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
英语感谢信范文
2015/01/20 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript