JQuery实现tab页

用ul 和 div 配合实现tab 页
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Tab页</title>
 6         <style>
 7             li{
 8                 list-style: none;
 9                 float: left;
10                  60px;
11                 height: 30px;
12                 background: #5F9EA0;
13                 border: 2px solid white;
14                 text-align: center;
15             }
16             .tabdiv{
17                  500px;
18                 height: 300px;
19                 background: #5F9EA0;
20             }
21         </style>
22         <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
23         <script>
24             $(function(){
25                 //页面加载时，默认第一个标签页与第一个div相连
26                 $("li:first").css("border-bottom","4px solid #5F9EA0");
27                 //单击标签事件
28                 $("li").click(function(){
29                     //清除底边展示
30                     $("li").each(function(){
31                         $(this).css("border-bottom","");
32                     });
33                     $(this).css("border-bottom","4px solid #5F9EA0");
34                     //所有div隐藏
35                     $(".tabdiv").each(function(){
36                         $(this).hide();
37                     });
38                     //与其关联的div显示
39                     $("#"+$(this).attr("tab")).show();
40                 })
41                 
42             })
43         </script>
44     </head>
45     <body>
46         <ul>
47             <li tab="div1">标签一</li>
48             <li tab="div2">标签二</li>
49             <li tab="div3">标签三</li>
50         </ul>
51         <div id="div0" style="clear: both;"></div>
52         <div class="tabdiv" id="div1" >div1内容</div>
53         <div class="tabdiv" id="div2" style="display: none;">div2内容</div>
54         <div class="tabdiv" id="div3" style="display: none;">div3内容</div>
55     </body>
56 </html>