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 相关文章推荐
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
百度地图自定义控件分享
Mar 04 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
基于vue--key值的特殊用处详解
Jul 31 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
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
Flask之flask-script模块使用
2018/07/26 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
PyTorch实现AlexNet示例
2020/01/14 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
.NET概念性的面试题
2012/02/29 面试题
中专生学习生活的自我评价分享
2013/10/27 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
倡议书格式模板
2014/05/13 职场文书
大型公益活动策划方案
2014/08/20 职场文书
php中pcntl_fork详解
2021/04/01 PHP
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL