jquery简单实现带渐显效果的选项卡菜单代码


Posted in Javascript onSeptember 01, 2015

本文实例讲述了jquery简单实现带渐显效果的选项卡菜单代码。分享给大家供大家参考。具体如下:

带渐显效果的选项卡菜单,使用了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>
<title>带渐显效果的选项卡菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body {
 background: #f0f0f0;
 margin: 0;
 padding: 0;
 font: 10px normal Verdana, Arial, Helvetica, sans-serif;
 color: #444;
}
h1 {
 font-size: 3em;
 margin: 20px 0;
}
.container {
 width: 500px;
 margin: 10px auto;
}
ul.tabs {
 margin: 0;
 padding: 0;
 float: left;
 list-style: none;
 height: 32px;
 border-bottom: 1px solid #999;
 border-left: 1px solid #999;
 width: 100%;
}
ul.tabs li {
 float: left;
 margin: 0;
 padding: 0;
 height: 31px;
 line-height: 31px;
 border: 1px solid #999;
 border-left: none;
 margin-bottom: -1px;
 background: #e0e0e0;
 overflow: hidden;
 position: relative;
}
ul.tabs li a {
 text-decoration: none;
 color: #000;
 display: block;
 font-size: 1.2em;
 padding: 0 20px;
 border: 1px solid #fff;
 outline: none;
}
ul.tabs li a:hover {
 background: #ccc;
} 
html ul.tabs li.active, html ul.tabs li.active a:hover {
 background: #fff;
 border-bottom: 1px solid #fff;
}
.tab_container {
 border: 1px solid #999;
 border-top: none;
 clear: both;
 float: left; 
 width: 100%;
 background: #fff;
 -moz-border-radius-bottomright: 5px;
 -khtml-border-radius-bottomright: 5px;
 -webkit-border-bottom-right-radius: 5px;
 -moz-border-radius-bottomleft: 5px;
 -khtml-border-radius-bottomleft: 5px;
 -webkit-border-bottom-left-radius: 5px;
}
.tab_content {
 padding: 20px;
 font-size: 1.2em;
}
.tab_content h2 {
 font-weight: normal;
 padding-bottom: 10px;
 border-bottom: 1px dashed #ddd;
 font-size: 1.8em;
}
.tab_content h3 a {
 color: #254588;
}
.tab_content img {
 float: left;
 margin: 0 20px 20px 0;
 border: 1px solid #ddd;
 padding: 5px;
}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 //Default Action
 $(".tab_content").hide(); //Hide all content
 $("ul.tabs li:first").addClass("active").show(); //Activate first tab
 $(".tab_content:first").show(); //Show first tab content
 //On Click Event
 $("ul.tabs li").click(function() {
  $("ul.tabs li").removeClass("active"); //Remove any "active" class
  $(this).addClass("active"); //Add "active" class to selected tab
  $(".tab_content").hide(); //Hide all tab content
  var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
  $(activeTab).fadeIn(); //Fade in the active content
  return false;
 });
});
</script>
</head>
<body>
<div class="container">
 <ul class="tabs">
  <li class="active"><a href="#tab1">tab1</a></li>
  <li><a href="#tab2" id="">tab2</a></li>
  <li><a href="#tab3">tab3</a></li>
  <li><a href="#tab4">tab4</a></li>
 </ul>
 <div class="tab_container">
  <div id="tab1" class="tab_content" style="display: block;">
   111111111111111
  </div>
  <div id="tab2" class="tab_content" style="display: none;">
   222222222222222
  </div>
  <div id="tab3" class="tab_content" style="display: none;">
   333333333333333
  </div>
  <div id="tab4" class="tab_content" style="display: none;">
   444444444444444
  </div>
 </div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
JS实现简单的表格增删
Jan 16 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 #Javascript
Jquery常用的方法汇总
Sep 01 #Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 #Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 #Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 #Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 #Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 #Javascript
You might like
php mssql 时间格式问题
2009/01/13 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
简洁的十分钟Python入门教程
2015/04/03 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
Python imread、newaxis用法详解
2019/11/04 Python
pytorch forward两个参数实例
2020/01/17 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
机关党建工作汇报材料
2014/08/20 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
陪护人员误工证明
2015/06/24 职场文书
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js