jquery实现经典的淡入淡出选项卡效果代码


Posted in Javascript onSeptember 22, 2015

本文实例讲述了jquery实现经典的淡入淡出选项卡效果代码。分享给大家供大家参考。具体如下:

这是一款经典的Tab选项卡代码,带有淡入淡出效果,jquery插件实现,希望大家能够喜欢,界面未做美化.感兴趣的朋友可以优化一下

运行效果截图如下:

jquery实现经典的淡入淡出选项卡效果代码

在线演示地址如下:

具体代码如下:

<!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>经典选项卡</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style type="text/css">
.tab{text-align:left;width:500px;border:#ccc 1px solid;margin:100px;}
.tab dt{border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1;margin-bottom:-1px;height:25px;line-height:25px;}
.tab dt strong{padding:0 15px;color:#444;}
.tab dt a{display:inline-block;cursor:pointer;padding:0 10px;text-align:center;background:#f1f1f1;color:#000;}
.tab dt a.on{background:#fff;color:#333;font-weight:bold;border-bottom:1px solid #fff;border-right:1px solid #ccc;border-left:1px solid #ccc;}
.tab dd{padding:10px;height:200px;clear:both;}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
 var tabTitle = ".tab dl dt a";
 var tabContent = ".tab dl ul";
 $(tabTitle + ":first").addClass("on");
 $(tabContent).not(":first").hide();
 $(tabTitle).unbind("click").bind("click", function(){
  $(this).siblings("a").removeClass("on").end().addClass("on");
  var index = $(tabTitle).index( $(this) );
  $(tabContent).eq(index).siblings(tabContent).hide().end().fadeIn("slow");
 });
});
</script>
<div class="tab">
 <dl>
  <dt><strong>经典选项卡</strong><a>手机卖场</a><a>三水点靠木</a><a>海澜男人</a><a>精品居家</a></dt>
  <dd>
  <ul>1111111111111111111111</ul>
  <ul>22222222222222222</ul>
  <ul>333333333333333333333</ul>
  <ul>444444444444444444</ul>
 </dd>
 </dl>
</div>
</body>
</html>

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

Javascript 相关文章推荐
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
jQuery find和children方法使用
Jan 31 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 #Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 #Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 #Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 #Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 #Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 #Javascript
Java Mybatis框架入门基础教程
Sep 21 #Javascript
You might like
8个出色的WordPress SEO插件收集
2011/02/26 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
2013/04/23 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
原生js调用json方法总结
2018/02/22 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
改进Django中的表单的简单方法
2015/07/17 Python
python append、extend与insert的区别
2016/10/13 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
用python批量下载apk
2020/12/29 Python
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
大学生村官承诺书
2014/03/28 职场文书
预备党员介绍人意见
2015/06/01 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript
nginx 配置指令之location使用详解
2022/05/25 Servers
virtualenv隔离Python环境的问题解析
2022/06/21 Python