teb的切换
HTML
<div class="gonggao" id="di2">
<div class="ggtb" id="op2">
<ul class="xinwen">
<li class="zhe zhe1">综合</li>
<li class="zhe zhe2">公告</li>
<li class="zhe zhe3">赛事</li>
<li class="zhe zhe4">攻略</li>
<li class="zhe zhe5">社区</li>
</ul>
</div>
<div class="nlong">
<ul class="dema" id="a1">
<li class="made">
<a href="" class="xiya">德玛西亚杯八强名单出炉</a>
</li>
<li class="xiamian ">
<span class="qita">其他</span>
<a href="" class="shouhu">"守护者"公益计划 黎明使者 卡尔玛 慈善皮肤</a>
<span class="weibu">12-13</span>
</li>
<li class="xiamian">
<span class="qita">视频</span>
<a href="" class="shouhu">厄斐琉斯英雄介绍:最强的武器，是信念</a>
<span class="weibu">12-12</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu">9.24版本更新公告：厄斐琉斯震撼登场</a>
<span class="weibu">12-11</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu">9.24云顶之弈更新：新职业系魂加入云顶</a>
<span class="weibu">12-11</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu">峡谷之巅第五赛季奖励公告</a>
<span class="weibu">12-11</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu">黑夜与黎明：抉择之刻即将到来!</a>
<span class="weibu">12-11</span>
</li>
</ul>
<ul class="dema" id="a2">
<li class="made">
<a href="" class="xiya">12月24日德玛西亚，恕瑞玛大区网络环境升级维护公告</a>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu">游戏环境公示及处罚名单12月20日</a>
<span class="weibu">12-20</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu">12月20日免费英雄更新公告</a>
<span class="weibu">12-18</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu">关于商城故障首批异常账号处理完毕公告</a>
<span class="weibu">12-17</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu">关于商城异常波动处理的后续公告</a>
<span class="weibu">12-14</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu">关于商城异常波动的处理公告</a>
<span class="weibu">12-13</span>
</li>
<li class="xiamian">
<span class="qita">公告</span>
<a href="" class="shouhu">9.24版本更新公告：厄斐琉斯震撼登场</a>
<span class="weibu">12-11</span>
</li>
</ul>
<ul class="dema" id="a3">
<li class="made">
<a href="" class="xiya">12月24日德玛西亚，恕瑞玛大区网络环境升级维护公告</a>
</li>
<li class="xiamian">
<span class="qita">新闻</span>
<a href="" class="shouhu">12月26日德杯八强淘汰赛开启</a>
<span class="weibu">12-24</span>
</li>
<li class="xiamian">
<span class="qita">视频</span>
<a href="" class="shouhu">《英雄麦克疯》：明凯教练骚话连篇</a>
<span class="weibu">12-23</span>
</li>
<li class="xiamian">
<span class="qita">视频</span>
<a href="" class="shouhu">选手靠谱时刻：德杯欢乐采访合集</a>
<span class="weibu">12-23</span>
</li>
<li class="xiamian">
<span class="qita">赛事</span>
<a href="" class="shouhu">小组赛圆满结束 兮夜首秀超神阿卡丽</a>
<span class="weibu">12-23</span>
</li>
<li class="xiamian">
<span class="qita">视频</span>
<a href="" class="shouhu">《英雄麦克疯》：表面兄弟狂飙演技</a>
<span class="weibu">12-22</span>
</li>
<li class="xiamian">
<span class="qita">视频</span>
<a href="" class="shouhu">TOP5：Yogurt奇亚娜致命奇袭势不可挡</a>
<span class="weibu">12-22</span>
</li>
</ul>
<ul class="dema" id="a4">
<li class="made">
<a href="" class="xiya">拉面熊进化无影剑 云顶火炮成关键输出装</a>
</li>
<li class="xiamian">
<span class="qita">教学</span>
<a href="" class="shouhu">云顶版本4大幻神 登顶率前4率双高</a>
<span class="weibu">12-22</span>
</li>
<li class="xiamian">
<span class="qita">教学</span>
<a href="" class="shouhu">图奇重拾ADC荣光 版本五路强势英雄推荐</a>
<span class="weibu">12-21</span>
</li>
<li class="xiamian">
<span class="qita">教学</span>
<a href="" class="shouhu">云顶新法海再称王 转型控制流核弹石头人</a>
<span class="weibu">12-21</span>
</li>
<li class="xiamian">
<span class="qita">教学</span>
<a href="" class="shouhu">梦魇成为金牌大C 9.24云顶3费卡评级</a>
<span class="weibu">12-19</span>
</li>
<li class="xiamian">
<span class="qita">教学</span>
<a href="" class="shouhu">刺客奥恩自带三把电刀 云顶雷霆刺化守为攻</a>
<span class="weibu">12-19</span>
</li>
<li class="xiamian">
<span class="qita">教学</span>
<a href="" class="shouhu">9.24六狂雷霆劫 爆炸AOE瞬间带走对手</a>
<span class="weibu">12-18</span>
</li>
</ul>
<ul class="dema" id="a5">
<li class="made">
<a href="" class="xiya">漫画：皮肤少得可怜的奥恩过圣诞啦！</a>
</li>
<li class="xiamian">
<span class="qita">娱乐</span>
<a href="" class="shouhu">G2老板和Perkz的约会：阿P发际线令人担忧！</a>
<span class="weibu">12-23</span>
</li>
<li class="xiamian">
<span class="qita">娱乐</span>
<a href="" class="shouhu">Caps接受采访：期待2020年和Forg1ven交手</a>
<span class="weibu">12-23</span>
</li>
<li class="xiamian">
<span class="qita">娱乐</span>
<a href="" class="shouhu">晋升奶爸！前FNC功勋辅助YellowStaR晒出自己的宝宝</a>
<span class="weibu">12-23</span>
</li>
<li class="xiamian">
<span class="qita">娱乐</span>
<a href="" class="shouhu">VG官方祝kkOma生日快乐：期待kkOma带领队伍腾飞！</a>
<span class="weibu">12-23</span>
</li>
<li class="xiamian">
<span class="qita">新闻</span>
<a href="" class="shouhu">虎扑专访VG双C-iBoy：不想遇到EDG！怕被他们打爆</a>
<span class="weibu">12-22</span>
</li>
<li class="xiamian">
<span class="qita">新闻</span>
<a href="" class="shouhu"> 选手生日簿：祝FPX上单选手Khan生日快乐！</a>
<span class="weibu">12-22</span>
</li>
</ul>
<a href="" class="zuidi">
<span class="n1">阅读更多</span>
<span class="n2">最新资讯</span>
</a>
</div>
</div>
</div>
<!-- 图片 -->
<div class="cl">
<div class="s1">
<div class="s2">
<h2 class="s3">热门活动</h2>
<ul class="huodong">
<li class="dianji">正在进行</li>
<li class="dianji">商城特惠</li>
<li class="dianji">长期活动</li>
</ul>
<a href="" class="geng">更多</a>
</div>
<div class="s4">
<ul class="s5" id="a6">
<li class="s6">
<img src="//ossweb-img.qq.com/images/clientpop/act/lol_1576814130_uploadnewsImg.jpg"
width="193px" alt="">
<p class="pp"> 糖果大战2019</p>
<a class="s7">10天后结束</a>
<div class="pp0">
<i class="pp3"></i>
<div class="pp4">
<h4 class="pp1">糖果大战2019</h4>
<p class="pp2">全新皮肤、炫彩礼包上线</p>
<p class="pp2">2019-12-20 - 2020-01-03</p>
</div>
</div>
</li>
<li class="s6">
<img src="images/qb.png" width="193px" alt="">
<p class="pp"> 德杯竞猜有奖</p>
<a class="s7">5天后结束</a>
<div class="pp0">
<i class="pp3"></i>
<div class="pp4">
<h4 class="pp1">德杯竞猜有奖</h4>
<p class="pp2">参与德杯竞猜，赢Q币大奖！</p>
<p class="pp2">2019-12-18 - 2019-12-29</p>
</div>
</div>
</li>
<li class="s6">
<img src="images/heyuelimeng.png" width="193px" alt="">
<p class="pp"> 黑夜使者 李青 至臻</p>
<a class="s7">21天后结束</a>
<div class="pp0">
<i class="pp3"></i>
<div class="pp4">
<h4 class="pp1">黑夜使者 李青 至臻</h4>
<p class="pp2">购买黑夜与黎明门票赚辉夜币赢取专属奖励，黑夜使者李青至臻皮肤限时兑换！</p>
<p class="pp2">2019-12-13 - 2020-01-14</p>
</div>
</div>
</li>
<li class="s6">
<img src="images/suolaka.png" width="193px" alt="">
<p class="pp"> 黑夜与黎明</p>
<a class="s7">3天后结束</a>
<div class="pp0">
<i class="pp3"></i>
<div class="pp4">
<h4 class="pp1">黑夜与黎明</h4>
<p class="pp2">全新皮肤、炫彩礼包上线</p>
<p class="pp2">2019-12-13 - 2019-12-27</p>
</div>
</div>
</li>
</ul>
<ul class="s5" id="a7">
<li class="s6">
<img src="images/xiaoxiao.png" width="193px" alt="">
<p class="pp">小小英雄第四系列</p>
<a class="s7">长期活动</a>
<div class="pp0">
<i class="pp3"></i>
<div class="pp4">
<h4 class="pp1">小小英雄第四系列</h4>
<p class="pp2">软软、小志、团子，向你报到！</p>
<p class="pp2">开启时间: 2019-08-20</p>
</div>
</div>
</li>
<li class="s6">
<img src="images/zhoumiam.png" width="193px" alt="">
<p class="pp">每周半价</p>
<a class="s7">已结束</a>
<div class="pp0">
<i class="pp3"></i>
<div class="pp4">
<h4 class="pp1">每周半价</h4>
<p class="pp2">每周精选英雄/皮肤 5折销售！</p>
<p class="pp2">2019-12-20 - 2019-12-22</p>
</div>
</div>
</li>
<li class="s6">
<img src="images/zoumian.png" width="196px" alt="">
<p class="pp">每周半价</p>
<a class="s7">已结束</a>
<div class="pp0">
<i class="pp3"></i>
<div class="pp4">
<h4 class="pp1">每周半价</h4>
<p class="pp2">每周精选英雄/皮肤 5折销售！</p>
<p class="pp2">2019-12-13 - 2019-12-16</p>
</div>
</div>
</li>
<li class="s6">
<img src="images/zhoubian.png" width="196px" alt="">
<p class="pp">冠军周边预定</p>
<a class="s7">已结束</a>
<div class="pp0">
<i class="pp3"></i>
<div class="pp4">
<h4 class="pp1">冠军周边预定</h4>
<p class="pp2">凤出东方，凰鸣四海，FPX冠军周边火热预定中！</p>
<p class="pp2">2019-11-15 - 2019-12-15</p>
</div>
</div>
</li>
</ul>
<ul class="s7" id="a8">
<li class="s6">
<img src="images/shizhounian.png" width="196px" alt="">
<p class="pp">十周年最强福利</p>
<a class="s7">长期活动</a>
<div class="pp0">
<i class="pp3"></i>
<div class="pp4">
<h4 class="pp1">十周年最强福利</h4>
<p class="pp2">限定皮肤回馈 无限火力归来</p>
<p class="pp2">开启时间: 2019-10-18</p>
</div>
</div>
</li>
<li class="s6">
<img src="images/nanqiang.png" width="196px" alt="">
<p class="pp">英雄联盟信誉分查询</p>
<a class="s7">长期活动</a>
<div class="pp0">
<i class="pp3"></i>
<div class="pp4">
<h4 class="pp1">英雄联盟信誉分查询</h4>
<p class="pp2">希望各位玩家保持良好游戏行为，一起营造健康的游戏环境！</p>
<p class="pp2">开启时间: 2019-09-09</p>
</div>
</div>
</li>
<li class="s6">
<img src="images/zhangmeng.png" width="196px" alt="">
<p class="pp">福来Day</p>
<a class="s7">长期活动</a>
<div class="pp0">
<i class="pp3"></i>
<div class="pp4">
<h4 class="pp1">福来Day</h4>
<p class="pp2">8月锦鲤：2019源计划周边1套</p>
<p class="pp2">开启时间: 2019-03-31</p>
</div>
</div>
</li>
<li class="s6">
<img src="images/xiaoyuan.png" width="196px" alt="">
<p class="pp">《校园解说大赛》等你发声！</p>
<a class="s7">长期活动</a>
<div class="pp0">
<i class="pp3"></i>
<div class="pp4">
<h4 class="pp1">《校园解说大赛》等你发声！</h4>
<p class="pp2">寻找校园最强赛事解说，助攻你的职业解说梦！</p>
<p class="pp2">开启时间: 2018-04-16</p>
</div>
</div>
</li>
</ul>
</div>
js
$('.xinwen li').hover(function(){
$(this).css("color","#1da6ba").siblings().css("color","#676767");
var i = $(this).index();
$('.nlong ul').eq(i).show().siblings().hide();
},function(){});