tab选项卡

 1  1 <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2  2 <html xmlns="http://www.w3.org/1999/xhtml">
 3  3  <head>
 4  4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5  5   <title>tab切换</title>
 6  6   <link type="text/css" rel="stylesheet" href="css/tabc.css">
 7  7   <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
 8  8   <script type="text/javascript" src="js/tabj.js"></script>
 9  9 
10 10  </head>
11 11  <body>
12 12     <div class="wrap">
13 13 
14 14         <div class="top">
15 15             <ul>
16 16                 <li class="tpChange"><a href="#">公告</a></li>
17 17                 <li><a href="#">规则</a></li>
18 18                 <li><a href="#">论坛</a></li>
19 19                 <li><a href="#">安全</a></li>
20 20                 <li><a href="#">公益</a></li>
21 21             </ul>
22 22         </div><!--top结束-->
23 23 
24 24         <div class="content">
25 25             <ul style="dislpay:block">
26 26                 <li>张勇：要玩快乐足球</li>
27 27                 <li>阿里200万灾区</li>
28 28                 <li>旅游宝让你边玩边赚钱</li>
29 29                 <li>多行跟进阿里贷款</li>
30 30             </ul>
31 31             <ul style="display:none">
32 32                 <li>[通知]滥发即将换新</li>
33 33                 <li>淘宝执行大众评审</li>
34 34                 <li>个人信息泄露严重</li>
35 35                 <li>卖家防范红包诈骗提醒</li>
36 36             </ul>
37 37             <ul style="display:none">
38 38                 <li>商品属性限制</li>
39 39                 <li>又爱又恨代金券</li>
40 40                 <li>购物后商家送红包</li>
41 41                 <li>比特币严管啦</li>
42 42             </ul>
43 43             <ul style="display:none">
44 44                 <li>金牌卖家再起航</li>
45 45                 <li>橱窗规则在升级</li>
46 46                 <li>走进无声课堂</li>
47 47                 <li>注意骗子的新技术</li>
48 48             </ul>
49 49             <ul style="display:none">
50 50                 <li>爱心品牌联合</li>
51 51                 <li>金发商品属性</li>
52 52                 <li>更换收货地址在的</li>
53 53                 <li>各公益机构淘宝开店</li>
54 54             </ul>
55 55         </div><!--content结束-->
56 56 
57 57     </div><!--wrap结束-->
58 58   
59 59  </body>
60 60 </html>

View Code

 1 *{margin:0;
 2   padding:0;}
 3 .wrap{
 4     width:300px;
 5     height:100px;
 6     border:1px solid #8E8E8E;
 7     margin:10px;
 8 }
 9 
10 .top{
11     height:25px;
12     background-color:#CAC8C8;
13     }
14 .top a{
15     text-decoration:none;
16     }
17 .top a:hover{
18     color:red;
19     }
20 .top li{
21     list-style:none;
22     float:left;
23     width:59px;
24     height:25px;
25     text-align:center;
26     line-height:25px;
27     }
28 
29 .content{
30     font-size:12px;
31     overflow:hidden;
32     height:70px;
33     width:300px;
34     line-height:25px;
35     }
36 .content li{
37     float:left;
38     list-style:none;
39     width:140px;
40     margin:6px 5px; 
41     }
42 .top li.tpChange{
43     background-color:white;
44     font-weight:bold;
45     }

View Code

 1 $(function(){
 2             var top_li=$(".top ul li");
 3             top_li.click(function(){
 4             $(this).addClass("tpChange")
 5                    .siblings().removeClass("tpChange");
 6             var index=top_li.index(this);
 7             $(".content > ul").eq(index).show()
 8                               .siblings().hide();
 9             })
10 });

View Code

遇到的问题：

1.引入js时，要先引入jQuery的js，再引入其他js，否则加载会出错。

2。注意css中tpChange类的写法

.top li.tpChange{
     background-color:white;
     font-weight:bold;
}

的写法，不能只写.tpChange。