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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
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动态创建Flash动画
2006/10/09 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
个人银行贷款担保书
2014/04/01 职场文书
2014年体育工作总结
2014/11/24 职场文书
党员剖析材料范文
2014/12/18 职场文书
销售人员管理制度
2015/08/06 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android
postgresql中如何执行sql文件
2023/05/08 PostgreSQL