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 相关文章推荐
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
javascript函数式编程基础
Sep 15 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浮点比较大小的方法
2016/02/14 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
python算法学习之基数排序实例
2013/12/18 Python
Python subprocess模块学习总结
2014/03/13 Python
python判断windows隐藏文件的方法
2014/03/21 Python
python使用pil生成缩略图的方法
2015/03/26 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
Python中的super()方法使用简介
2015/08/14 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
详解Python的Lambda函数与排序
2016/10/25 Python
查看django版本的方法分享
2018/05/14 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
运动会口号霸气押韵
2015/12/24 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
Java基础之this关键字的使用
2021/06/30 Java/Android
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
服务器SVN搭建图文安装过程
2022/06/21 Servers