用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 width: 60px;
11 height: 30px;
12 background: #5F9EA0;
13 border: 2px solid white;
14 text-align: center;
15 }
16 .tabdiv{
17 width: 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>