JQuery 选项卡效果(JS与HTML的分离)
时间：2024-04-19 10:43:05
在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加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>
标签：JQuery,选项卡
0
投稿猜你喜欢
显示日期格式的几个函数
2008-09-03 13:20:00
JavaScript 设计模式 富有表现力的Javascript（一）
2023-08-25 07:42:15
Javascript Closures (2)
2009-03-18 12:22:00
python将字符串转换成数组的方法
2021-03-04 20:09:54
用ASP建立一个简单的聊天室
2007-09-21 12:43:00
asp程序错误详细说明例表
2008-04-02 12:13:00
python处理大数字的方法
2022-06-09 02:19:03
Python贪心算法实例小结
2021-08-05 21:10:17
Python ChineseCalendar包主要类和方法详解
2021-10-12 10:40:40
PyGame贪吃蛇的实现代码示例
2021-04-27 12:09:33
Python urllib3软件包的使用说明
2023-08-04 13:51:31
SQL Server 中调整自增字段的当前初始值
2024-01-27 13:53:01
gearman + mysql方式实现持久化操作示例
2024-01-16 14:00:22
浅谈web分析
2008-12-02 15:52:00
python入门之语句(if语句、while语句、for语句)
2022-01-25 20:01:07
浅析Python 简单工厂模式和工厂方法模式的优缺点
2023-08-04 00:15:00
Android通过PHP服务器实现登录功能
2023-07-02 07:08:58
Python中List.count()方法的使用教程
2023-08-12 11:56:15
10个ASP网页制作技巧
2007-09-24 13:12:00
Python接口自动化浅析登录接口测试实战
2021-06-06 21:48:13
