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 import css实例代码
Jul 18 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
悬浮数字的实现案例
Feb 19 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
JS闭包用法实例分析
Mar 27 Javascript
VUE长按事件需求详解
Oct 18 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
JS数据类型判断的几种常用方法
Jul 07 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 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
杏林同学录(六)
2006/10/09 PHP
一个ubbcode的函数,速度很快.
2006/10/09 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python引用模块和查找模块路径
2016/03/17 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
波兰补充商店:Muscle Power
2018/10/29 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
介绍一下XMLHttpRequest对象
2012/02/12 面试题
大学自我鉴定范文
2013/12/26 职场文书
大学生村官任职感言
2014/01/09 职场文书
先进集体获奖感言
2014/02/13 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
python在package下继续嵌套一个package
2022/04/14 Python