基于jQuery实现的一个选项卡效果，重点体现在HTML里没有内联事件处理程序，而是定义在js文件里，做到行为与结构的分离。在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。
效果演示：
Javascript（jQuery）代码如下：
1 <script language="javascript" type="text/javascript"> 2 $(document).ready(function(){ 3 $("ul.menu li:first-child").addClass("current"); 4 $("div.content").find("div.layout:not(:first-child)").hide(); 5 $("div.content div.layout").attr("id", function(){return idNumber("No")+ $("div.content div.layout").index(this)}); 6 $("ul.menu li").click(function(){ 7 var c = $("ul.menu li"); 8 var index = c.index(this); 9 var p = idNumber("No"); 10 show(c,index,p); 11 }); 12 13 function show(controlMenu,num,prefix){ 14 var content= prefix + num; 15 $('#'+content).siblings().hide(); 16 $('#'+content).show(); 17 controlMenu.eq(num).addClass("current").siblings().removeClass("current"); 18 }; 19 20 function idNumber(prefix){ 21 var idNum = prefix; 22 return idNum; 23 }; 24 }); 25 </script>
CSS样式代码如下：
1 <style type="text/css"> 2 * {margin:0; padding:0} 3 ul,li { list-style:none} 4 .box {width:450px; height:150px; border:1px solid #ccc; margin:10px; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif} 5 .tagMenu {height:28px; line-height:28px; background:#efefef; position:relative; border-bottom:1px solid #999} 6 .tagMenu h2 {font-size:12px; padding-left:10px;} 7 .tagMenu ul {position:absolute; left:100px; bottom:-1px; height:26px;} 8 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} 9 ul.menu li.current {border:1px solid #999; border-bottom:none; background:#fff; height:25px; line-height:26px; margin:0} 10 .content { padding:10px} 11 </style>
HTML结构代码如下：
1 <body> 2 <div class="box"> 3 <div class="tagMenu"> 4 <h2>No.1 Menu</h2> 5 <ul class="menu"> 6 <li>Label 1.1</li> 7 <li>Label 1.2</li> 8 <li>Label 1.3</li> 9 <li>Label 1.4</li> 10 </ul> 11 </div> 12 <div class="content"> 13 <div class="layout">infomation 1.1</div> 14 <div class="layout">infomation 1.2</div> 15 <div class="layout">infomation 1.3</div> 16 <div class="layout">infomation 1.4</div> 17 </div> 18 </div> 19 20 <div class="box"> 21 <div class="tagMenu"> 22 <h2>No.2 Menu</h2> 23 <ul class="menu"> 24 <li>Label 2.1</li> 25 <li>Label 2.2</li> 26 <li>Label 2.3</li> 27 <li>Label 2.4</li> 28 </ul> 29 </div> 30 <div class="content"> 31 <div class="layout">infomation 2.1</div> 32 <div class="layout">infomation 2.2</div> 33 <div class="layout">infomation 2.3</div> 34 <div class="layout">infomation 2.4</div> 35 </div> 36 </div> 37 </body>