1 <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>tab切换</title>
6 <link type="text/css" rel="stylesheet" href="css/tabc.css">
7 <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
8 <script type="text/javascript" src="js/tabj.js"></script>
9
10 </head>
11 <body>
12 <div class="wrap">
13
14 <div class="top">
15 <ul>
16 <li class="tpChange"><a href="#">公告</a></li>
17 <li><a href="#">规则</a></li>
18 <li><a href="#">论坛</a></li>
19 <li><a href="#">安全</a></li>
20 <li><a href="#">公益</a></li>
21 </ul>
22 </div><!--top结束-->
23
24 <div class="content">
25 <ul style="dislpay:block">
26 <li>张勇：要玩快乐足球</li>
27 <li>阿里200万灾区</li>
28 <li>旅游宝让你边玩边赚钱</li>
29 <li>多行跟进阿里贷款</li>
30 </ul>
31 <ul style="display:none">
32 <li>[通知]滥发即将换新</li>
33 <li>淘宝执行大众评审</li>
34 <li>个人信息泄露严重</li>
35 <li>卖家防范红包诈骗提醒</li>
36 </ul>
37 <ul style="display:none">
38 <li>商品属性限制</li>
39 <li>又爱又恨代金券</li>
40 <li>购物后商家送红包</li>
41 <li>比特币严管啦</li>
42 </ul>
43 <ul style="display:none">
44 <li>金牌卖家再起航</li>
45 <li>橱窗规则在升级</li>
46 <li>走进无声课堂</li>
47 <li>注意骗子的新技术</li>
48 </ul>
49 <ul style="display:none">
50 <li>爱心品牌联合</li>
51 <li>金发商品属性</li>
52 <li>更换收货地址在的</li>
53 <li>各公益机构淘宝开店</li>
54 </ul>
55 </div><!--content结束-->
56
57 </div><!--wrap结束-->
58
59 </body>
60 </html>
*{margin:;
padding:;}
.wrap{
width:300px;
height:100px;
border:1px solid #8E8E8E;
margin:10px;
}
.top{
height:25px;
background-color:#CAC8C8;
}
.top a{
text-decoration:none;
}
.top a:hover{
color:red;
}
.top li{
list-style:none;
float:left;
width:59px;
height:25px;
text-align:center;
line-height:25px;
}
.content{
font-size:12px;
overflow:hidden;
height:70px;
width:300px;
line-height:25px;
}
.content li{
float:left;
list-style:none;
width:140px;
margin:6px 5px;
}
.top li.tpChange{
background-color:white;
font-weight:bold;
}
$(function(){
var top_li=$(".top ul li");
top_li.click(function(){
$(this).addClass("tpChange")
.siblings().removeClass("tpChange");
var index=top_li.index(this);
$(".content > ul").eq(index).show()
.siblings().hide();
})
});
遇到的问题：
1.引入js时，要先引入jQuery的js，再引入其他js，否则加载会出错。
2。注意css中tpChange类的写法
.top li.tpChange{
background-color:white;
font-weight:bold;
}
的写法，不能只写.tpChange。