jquery实现超简洁的TAB选项卡效果代码


Posted in Javascript onAugust 28, 2015

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

这是一款超简洁的TAB选项卡,个人觉得有点太简单,简单的有点不习惯,美化修饰一下其实效果更好。实际上应该为点击过的TAB添加一个背景色,区分一下,这样比较好。

先来看看运行效果截图:

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;}
.menu li{width:60px; height:30px; text-align:center; line-height:30px; float:left; cursor:pointer;}
.menu li:hover, .menu li.on{color:#f00;}
.cont{width:180px; height:100px; border:1px solid #666666; clear:both;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $(".menu li").click(function(){   
  var Num=$(this).index("li");
  $(".menu li").removeClass("on").eq(Num).addClass("on");
  $(".cont").hide().eq(Num).show();  
  });       
 });
</script>
</head>
<body>
<div class="tab"> 
 <ul class="menu">
 <li class="on">北欧之旅</li>
 <li>音乐维也纳</li>
 <li>天堂瑞士</li>
 </ul>
 <div class="cont">北欧之旅</div>
 <div class="cont" style="display:none;">音乐维也纳</div>
 <div class="cont" style="display:none;">天堂瑞士</div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
vue 如何使用递归组件
Oct 23 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 #Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 #Javascript
Angular Js文件上传之form-data
Aug 28 #Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 #Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 #Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 #Javascript
js实现显示当前状态的导航效果代码
Aug 28 #Javascript
You might like
PHP静态文件生成类实例
2014/11/29 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
jquery实现简单的无缝滚动
2015/04/15 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python编码类型转换方法详解
2016/07/01 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
python中PyQuery库用法分享
2021/01/15 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
法国房车租赁网站:Yescapa
2019/08/26 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
文艺晚会主持词
2014/03/24 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
文艺晚会开场白
2015/05/29 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
商务宴会祝酒词
2015/08/11 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书