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 相关文章推荐
js打印纸函数代码(递归)
Jun 18 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
extjs render 用法介绍
Sep 11 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
基于JavaScript实现轮播图效果
Jan 02 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
PHP数组去重比较快的实现方式
2016/01/19 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
PHP实现的策略模式示例
2019/03/20 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
Flask之请求钩子的实现
2018/12/23 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
python地震数据可视化详解
2019/06/18 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
物流管理专业应届生求职信
2013/11/21 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL