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 相关文章推荐
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
antd table按表格里的日期去排序操作
Nov 17 Javascript
js实现随机点名
Jan 19 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魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
php魔术变量用法实例详解
2014/11/13 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
农历与西历对照
2006/09/06 Javascript
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
js实现登录与注册界面
2017/11/01 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
Python模块future用法原理详解
2020/01/20 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
python中如何进行连乘计算
2020/05/28 Python
python调用摄像头的示例代码
2020/09/28 Python
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
学生手册家长评语
2014/02/10 职场文书
期末学生评语大全
2014/04/24 职场文书
群教个人对照检查材料
2014/08/20 职场文书
股东授权委托书范本
2014/09/13 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers