基于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>
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>
下載下傳DEMO：
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)