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>
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 }
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 });
遇到的问题：
1.引入js时，要先引入jQuery的js，再引入其他js，否则加载会出错。
2。注意css中tpChange类的写法
.top li.tpChange{
background-color:white;
font-weight:bold;
}
的写法，不能只写.tpChange。