基于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 相关文章推荐
Javascript 模式实例 观察者模式
Oct 24 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
Bootstrap模态窗口源码解析
Feb 08 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
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
php微信开发之图片回复功能
2018/06/14 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
python分析nignx访问日志脚本分享
2015/02/26 Python
Python可跨平台实现获取按键的方法
2015/03/05 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Django CBV类的用法详解
2019/07/26 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
机电专业大学生求职信
2013/10/04 职场文书
2013英文求职信模板范文
2013/11/15 职场文书
工作会议主持词
2014/03/17 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书