JQuery 选项卡效果(JS与HTML的分离)


Posted in Javascript onApril 01, 2010

在实际应用过程中,只要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。
Javascript(jquery)代码如下:

<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
$("ul.menu li:first-child").addClass("current"); 
$("div.content").find("div.layout:not(:first-child)").hide(); 
$("div.content div.layout").attr("id", function(){return idNumber("No")+ $("div.content div.layout").index(this)}); 
$("ul.menu li").click(function(){ 
var c = $("ul.menu li"); 
var index = c.index(this); 
var p = idNumber("No"); 
show(c,index,p); 
}); 
function show(controlMenu,num,prefix){ 
var content= prefix + num; 
$('#'+content).siblings().hide(); 
$('#'+content).show(); 
controlMenu.eq(num).addClass("current").siblings().removeClass("current"); 
}; 
function idNumber(prefix){ 
var idNum = prefix; 
return idNum; 
}; 
}); 
</script>

CSS样式代码如下:
<style type="text/css"> 
* {margin:0; padding:0} 
ul,li { list-style:none} 
.box {width:450px; height:150px; border:1px solid #ccc; margin:10px; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif} 
.tagMenu {height:28px; line-height:28px; background:#efefef; position:relative; border-bottom:1px solid #999} 
.tagMenu h2 {font-size:12px; padding-left:10px;} 
.tagMenu ul {position:absolute; left:100px; bottom:-1px; height:26px;} 
ul.menu li {float:left; margin-bottom:1px; line-height:16px; height:14px; margin:5px 0 0 -1px; border-left:1px solid #999; text-align:center; padding:0 12px; cursor:pointer} 
ul.menu li.current {border:1px solid #999; border-bottom:none; background:#fff; height:25px; line-height:26px; margin:0} 
.content { padding:10px} 
</style>

HTML结构代码如下:
<body> 
<div class="box"> 
<div class="tagMenu"> 
<h2>No.1 Menu</h2> 
<ul class="menu"> 
<li>Label 1.1</li> 
<li>Label 1.2</li> 
<li>Label 1.3</li> 
<li>Label 1.4</li> 
</ul> 
</div> 
<div class="content"> 
<div class="layout">infomation 1.1</div> 
<div class="layout">infomation 1.2</div> 
<div class="layout">infomation 1.3</div> 
<div class="layout">infomation 1.4</div> 
</div> 
</div> 
<div class="box"> 
<div class="tagMenu"> 
<h2>No.2 Menu</h2> 
<ul class="menu"> 
<li>Label 2.1</li> 
<li>Label 2.2</li> 
<li>Label 2.3</li> 
<li>Label 2.4</li> 
</ul> 
</div> 
<div class="content"> 
<div class="layout">infomation 2.1</div> 
<div class="layout">infomation 2.2</div> 
<div class="layout">infomation 2.3</div> 
<div class="layout">infomation 2.4</div> 
</div> 
</div> 
</body>
Javascript 相关文章推荐
常用的javascript function代码
May 23 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 #Javascript
JQuery autocomplete 使用手册
Apr 01 #Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 #Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 #Javascript
js prototype截取字符串函数
Apr 01 #Javascript
javascript getElementsByClassName函数
Apr 01 #Javascript
JS getStyle获取最终样式函数代码
Apr 01 #Javascript
You might like
用cookies来跟踪识别用户
2006/10/09 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
PHP发送短信代码分享
2015/08/11 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
一个原生的用户等级的进度条
2010/07/03 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
西双版纳导游词
2015/02/03 职场文书
投资入股协议书
2016/03/22 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫
Python中time标准库的使用教程
2022/04/13 Python
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript