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 相关文章推荐
jQuery 连续列表实现代码
Dec 21 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
js实现简单的打印表格
Jan 15 Javascript
原生js实现碰撞检测
Mar 12 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
德生PL660的电路分析和打磨
2021/03/02 无线电
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
JavaScript的Function详细
2006/11/14 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
页面使用密码保护代码
2013/04/10 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
js日期联动示例
2014/05/02 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
Python get获取页面cookie代码实例
2018/09/12 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
python实现停车管理系统
2018/11/30 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
基于Python实现粒子滤波效果
2020/12/01 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
音乐教育感言
2014/03/05 职场文书
授权委托书(完整版)
2014/09/10 职场文书
旷课检讨书范文
2014/10/30 职场文书
2016新年慰问信范文
2015/03/25 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL