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代码复用模式详解
Nov 07 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
angularjs性能优化的方法
Sep 05 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
JS实现瀑布流效果
Mar 07 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
基于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语法(4)
2006/10/09 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
php数组合并的二种方法
2014/03/21 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
php验证码实现代码(3种)
2015/09/07 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
微信小程序实现选项卡效果
2018/11/06 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python中for循环详解
2014/01/17 Python
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
python 字典访问的三种方法小结
2019/12/05 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
优秀管理者获奖感言
2014/02/17 职场文书
单位未婚证明范本
2014/11/25 职场文书
学习计划是什么
2019/04/30 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server