基于jquery的9行js轻松实现tab控件示例


Posted in Javascript onOctober 12, 2013
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
/** 
* 考虑到tab和pane有可能被动态的添加和删除, 
* 所以每次都废点时间去查找先前被激活的tab 
*/ 
var tab = function(tabId,activeId){ 
$("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){ 
$("#"+$("#"+activeId).attr("tar")).css("display","none"); 
$("#"+activeId).removeAttr("id"); $(this).attr("id",activeId); 
$("#"+$(this).attr("tar")).css("display","block"); 
}); 
}; 
</script> 
</head> 
<style> 
li{ 
border:1px solid #b5e2f3; 
border-bottom:0px; 
float:left; 
width:100px; 
height:25px; 
margin:0 7px; 
background:#F1FEF3; 
padding:9px 0 0 0; 
text-align:center; 
color:#33a3dc; 
cursor:pointer; 
} 
ul{ 
width:800; 
height:36px; 
border-bottom:1px solid #b5e2f3; 
} 
#selected{ 
background:#FFF!important; 
border-bottom:2px solid #FFF!important; 
} 
ul{margin:-1px;} 
#cate1,#cate2, #cate3, #cate4, #cate5{ 
clear:both; 
height:300px; 
background:#FFFFFF; 
width:800px; 
height:100px; 
padding:25px; 
border:1px solid #b5e2f3; 
} 
</style> 
<body> 
<div id="tab"> 
<ul> 
<li tar="cate1" id="selected">1</li> 
<li tar="cate2">2</li> 
<li tar="cate3">3</li> 
<li tar="cate4">4</li> 
</ul> 
</div> 
<div> 
<div id="cate1" style="display:block;"> 
1 
</div> 
<div id="cate2" style="display:none;"> 
2 
</div> 
<div id="cate3" style="display:none;"> 
3 
</div> 
<div id="cate4" style="display:none;"> 
4 
</div> 
</div> 
</body> 
<script> 
tab("tab","selected"); 
</script> 
</html>
Javascript 相关文章推荐
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
javascript流程控制语句集合
Sep 18 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
JavaScript对象学习经验整理
Oct 12 #Javascript
js修改input的type属性问题探讨
Oct 12 #Javascript
5秒后跳转到另一个页面的js代码
Oct 12 #Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 #Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 #Javascript
JS验证身份证有效性示例
Oct 11 #Javascript
JS分页效果示例
Oct 11 #Javascript
You might like
PHP 判断变量类型实现代码
2009/10/23 PHP
php 判断数组是几维数组
2013/03/20 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
webpack3+React 的配置全解
2017/08/21 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
如何提高SQL Server的安全性
2016/07/25 面试题
简单说下OSPF的操作过程
2014/08/13 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
教学评估实施方案
2014/03/16 职场文书
财产保全担保书
2015/01/20 职场文书
医学生自荐信范文
2015/03/05 职场文书
小马王观后感
2015/06/11 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
python实现MD5进行文件去重的示例代码
2021/07/09 Python
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript