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 回调函数中变量作用域的讨论
Sep 11 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 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后门URL的防范
2013/11/12 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
JS功能代码集锦
2016/05/04 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
python执行外部程序的常用方法小结
2015/03/21 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
女方婚礼新郎答谢词
2014/01/11 职场文书
大学生军训广播稿
2014/01/24 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
2015年语言文字工作总结
2015/07/23 职场文书