jquery实现未经美化的简洁TAB菜单效果


Posted in Javascript onAugust 28, 2015

本文实例讲述了jquery实现未经美化的简洁TAB菜单效果。分享给大家供大家参考。具体如下:

这是一个看上去未经美化的简洁TAB选项卡,触发类的动作都是完整的,有兴趣的自己进行美化,美化漂亮了还是相当不错的,代码简洁,对学习参考比较不错,使用了jQuery插件。

运行效果截图如下:

jquery实现未经美化的简洁TAB菜单效果

在线演示地址如下:

具体代码如下:

<!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>未经美化的简洁TAB</title>
<style>
body {font:normal 12px/20px simsun; margin:0 auto; padding:0;} 
* {margin: 0px; padding: 0px;}
h4{font-size:14px;}
h5{font-size:12px;}
img {border:none;}
ul,li{list-style-type:none;}
a{text-decoration:none;}
a:link{text-decoration:none;}
a:hover{text-decoration:underline; color:#ffae00;}
#tab{width:240px; margin:0 auto; text-align:center;}
.menu{height:35px; line-height:32px; padding-top:1px;}
.menu a{display:inline-block; height:35px; line-height:35px; width:116px; text-align:center; font-size:20px; color:#999999; font-weight:bold;}
.menu a:hover, .menu a.on{color:#d33b55; text-decoration:none;}
.cnt{border:1px solid #999999; width:240px; height:100px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $(".menu a").each(function(i){
  $(this).click(function(){
   $(".menu a").removeClass("on").eq(i).addClass("on");
   $(".cnt").hide().eq(i).show();
   return false; //防止a跳转;
  })
 })
 });
</script>
</head>
<body>
<div id="tab">
 <div class="menu">
 <a href="#" class="on">ASP源码</a>
 <a href="#">Java源码</a>
 </div>
 <div class="cnt">
 <ul>
 <li>ASP源码1</li>
 <li>ASP源码2</li>
 <li>ASP源码3</li>
 </ul>
 </div>
 <div class="cnt" style="display:none;">
 <ul>
 <li>Java源码1</li>
 <li>Java源码2</li>
 <li>Java源码3</li>
 </ul>
 </div>
 </div>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript去掉空格的方法集合
Dec 28 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 #Javascript
js实现显示当前状态的导航效果代码
Aug 28 #Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 #Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 #Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 #Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 #Javascript
jquery实现多条件筛选特效代码分享
Aug 28 #Javascript
You might like
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
在Django的视图中使用form对象的方法
2015/07/18 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
python中私有函数调用方法解密
2016/04/29 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
关于Java String的一道面试题
2013/09/29 面试题
英文版银行求职信
2013/10/09 职场文书
普通员工辞职信
2014/01/17 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
主管会计岗位职责
2014/03/13 职场文书
留学顾问岗位职责
2014/04/14 职场文书
关于保护环境的建议书
2014/05/13 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书