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 相关文章推荐
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 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实现的购物车类实例
2015/06/17 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
Vue性能优化的方法
2020/07/30 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
django文档学习之applications使用详解
2018/01/29 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
学生励志演讲稿
2014/01/06 职场文书
大学生村官承诺书
2014/03/28 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
入党自传范文2015
2015/06/26 职场文书
Go Plugins插件的实现方式
2021/08/07 Golang
vue如何清除浏览器历史栈
2022/05/25 Vue.js