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

时间：2020-12-17 03:06:17|栏目：jquery|点击：次

在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加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与prototype框架的详细对比

栏目：jquery

下一篇：基于jquery实现的可编辑下拉框实现代码

本文标题：JQuery 选项卡效果(JS与HTML的分离)

本文地址：http://www.codeinn.net/misctech/33857.html

更多jquery

jquery

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

阅读排行

推荐教程