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 相关文章推荐
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
纯js实现倒计时功能
Jan 06 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
简单的三步vuex入门
May 20 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
Vue 自适应高度表格的实现方法
May 13 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
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
处理Python中的URLError异常的方法
2015/04/30 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python实现多进程的四种方式
2019/02/22 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
python GUI计算器的实现
2020/10/09 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
环保口号大全
2014/06/12 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript