帝国cms如何实现有切换选项卡的图书推荐列表？

功能需求：做一个有切换卡效果的信息列表，包含图片、信息标题，默认第一项显示图片和标题，其他只显示标题。当鼠标移动的时候，能够自动切换信息。
将下面这段代码放到内容模板

1. <divclass="a_bktj">
2. <pclass="bk_title">本目录推荐</p>
3. <ulid="tab">
4. [e:loop={'selfinfo',9,2,1,0,0}]
5. <li<?if($bqno==1){echo'class="tab-current"';}?>><ahref="<?=$bqr[titleurl]?>"target="_blank"><i>0<?=$bqno?></i><imgsrc="<?=$bqr[titlepic]?>"alt="<?=$bqr[title]?>"><p><?=$bqr[title]?></p></a></li>
6. [/e:loop]
7. </ul>
8. <script>
9. $("#tabli").hover(function(){
10. varindex=$(this).index();
11. $(this).parents().next().find(".tab-box").hide().eq(index).show();
12. $(this).addClass("tab-current").siblings().removeClass("tab-current");
13. });
14. </script>
15. </div>

CSS：

1. <style>
2. .a_bktj{padding:20px;}
3. .a_bktjli{overflow:hidden;border-bottom:1pxsolid#f5f2f0;padding-bottom:10px;margin-bottom:10px;}
4. .a_bktjlii{float:left;color:#aaa;font-family:arial;margin-right:10px;padding-top:13px;}
5. .a_bktjliimg{max-height:80px;max-width:80px;float:left;display:none;}
6. .a_bktjlip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:10px;}
7. .a_bktjli:hoverimg{display:block;}
8. .a_bktjli:hoverp{white-space:initial;}
9. li.tab-currentimg{display:block;}
10. li.tab-currentp{white-space:initial;}
11. </style>

实现效果：