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 相关文章推荐
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
JavaScript小技巧整理
Dec 30 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
基于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 分页原理详解
2009/08/21 PHP
php 错误处理经验分享
2011/10/11 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
python标准库OS模块详解
2020/03/10 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
python中pivot()函数基础知识点
2021/01/03 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
销售文员岗位职责
2013/11/29 职场文书
酒店个人求职信范文
2014/01/25 职场文书
会计核算科岗位职责
2014/03/19 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers
vue中data里面的数据相互使用方式
2022/06/05 Vue.js