jquery实现初次打开有动画效果的网页TAB切换代码


Posted in Javascript onSeptember 06, 2015

本文实例讲述了jquery实现初次打开有动画效果的网页TAB切换代码。分享给大家供大家参考。具体如下:

这是一款初次打开有动画效果的网页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.cur .d-bk{ border:1px solid #F00; width:300px; height:150px; background-color:#f1f1f1; position:absolute; left:0; top:30px; color:#333;}
</style>
<script type="text/javascript">
 $(document).ready(function(){
  $(".demo li div").hide();
  $(".demo li").click(function(){
   $(this).addClass("cur").siblings().removeClass("cur");
   $("div.d-bk").slideDown()
   },function(){
   $("div.d-bk").slideUp() 
  })
 })
</script>
</head>
<body>
<ul class="demo">
 <li>
  导航1
 <div class="d-bk">111</div>
 </li>
 <li>
  导航2
 <div class="d-bk">222</div>
 </li>
 <li>
  导航3
 <div class="d-bk">333</div>
 </li>
</ul>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 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
Js制作点击输入框时默认文字消失的效果
Sep 05 #Javascript
You might like
Zend的MVC机制使用分析(二)
2013/05/02 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
基于canvas粒子系统的构建详解
2017/08/31 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
想学画画?python满足你!
2020/12/24 Python
乌克兰在线药房:Аптека24
2019/10/30 全球购物
求职推荐信范文
2013/12/01 职场文书
党员反邪教心得体会
2016/01/15 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
Python基础详解之邮件处理
2021/04/28 Python