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 相关文章推荐
广告显示判断
Aug 31 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 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
Symfony数据校验方法实例分析
2015/01/26 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
学习python的前途 python挣钱
2019/02/27 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
财务管理专业推荐信
2013/11/19 职场文书
总经理岗位职责范本
2014/02/02 职场文书
高中运动会入场词
2014/02/14 职场文书
会计岗位职责模板
2014/03/12 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
承诺书范本
2015/01/21 职场文书
护理工作个人总结
2015/03/03 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
Apache POI的基本使用详解
2021/11/07 Servers