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

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

功能需求：做一个有切换卡效果的信息列表，包含图片、信息标题，默认第一项显示图片和标题，其他只显示标题。当鼠标移动的时候，能够自动切换信息。Ysb电脑_数码_手机应用问题解决的IT技术网站seo - 云狐网
将下面这段代码放到内容模板 .

1. <div class="a_bktj"> 
2.     <p class="bk_title">本目录推荐</p> 
3.    <ul id="tab"> 
4. [e:loop={'selfinfo',9,2,1,0,0}] 
5.     <li <?if($bqno==1){echo 'class="tab-current"';}?>><a href="<?=$bqr[titleurl]?>" target="_blank"><i>0<?=$bqno?></i><img src="<?=$bqr[titlepic]?>" alt="<?=$bqr[title]?>"><p><?=$bqr[title]?></p></a></li> 
6. [/e:loop] 
7.    </ul> 
8. <script> 
9.     $("#tab li").hover(function(){ 
10.      var index=$(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_bktj li { overflow: hidden; border-bottom: 1px solid #f5f2f0; padding-bottom: 10px; margin-bottom: 10px; } 
4. .a_bktj li i { float: left; color: #aaa; font-family: arial; margin-right: 10px; padding-top: 13px; } 
5. .a_bktj li img { max-height: 80px; max-width: 80px; float: left; display: none; } 
6. .a_bktj li p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 10px; } 
7. .a_bktj li:hover img { display: block; } 
8. .a_bktj li:hover p { white-space: initial; } 
9. li.tab-current img {display: block;} 
10. li.tab-current p {white-space: initial;} 
11. </style> 

.实现效果：