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 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
jquery中this的使用说明
Sep 06 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
node.js实现端口转发
Apr 14 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
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
深入解析php中的foreach问题
2013/06/30 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
javascript instanceof,typeof的区别
2010/03/24 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
Python无损压缩图片的示例代码
2020/08/06 Python
Python hashlib模块的使用示例
2020/10/09 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
餐厅总经理岗位职责
2013/12/31 职场文书
挂职思想汇报
2013/12/31 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
大型活动组织方案
2014/05/10 职场文书
小学运动会报道稿
2014/10/04 职场文书
单位同意报考证明
2015/06/17 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL