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 相关文章推荐
Grid得到选择行数据的方法总结
Jan 17 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
Dec 22 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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获取新浪微博数据API实例
2013/11/12 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
python实现彩色图转换成灰度图
2019/01/15 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
详解python UDP 编程
2020/08/24 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
工程管理英文求职信
2014/03/18 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
工程负责人任命书
2014/06/06 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
歌舞青春观后感
2015/06/10 职场文书
python实现监听键盘
2021/04/26 Python
Django 实现jwt认证的示例
2021/04/30 Python
详解Python函数print用法
2021/06/18 Python