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

2024年03月26日 帝国cms教程 帝国cms使用教程 懒猪技术

功能需求:做一个有切换卡效果的信息列表,包含图片、信息标题,默认第一项显示图片和标题,其他只显示标题。当鼠标移动的时候,能够自动切换信息。下面是懒猪模板网整理的关于如何在帝国cms中实现鼠标切换信息调用的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。

将下面这段代码放到内容模板

 <div class="a_bktj">
    <p class="bk_title">本目录推荐</p>
   <ul id="tab">
[e:loop={'selfinfo',9,2,1,0,0}]
    <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>
[/e:loop]
   </ul>
<script>
    $("#tab li").hover(function(){ 
     var index=$(this).index(); 
     $(this).parents().next().find(".tab-box").hide().eq(index).show();     
     $(this).addClass("tab-current").siblings().removeClass("tab-current"); 
    });
</script>
 </div>

CSS:

<style>
.a_bktj { padding: 20px; }
.a_bktj li { overflow: hidden; border-bottom: 1px solid #f5f2f0; padding-bottom: 10px; margin-bottom: 10px; }
.a_bktj li i { float: left; color: #aaa; font-family: arial; margin-right: 10px; padding-top: 13px; }
.a_bktj li img { max-height: 80px; max-width: 80px; float: left; display: none; }
.a_bktj li p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 10px; }
.a_bktj li:hover img { display: block; }
.a_bktj li:hover p { white-space: initial; }
li.tab-current img {display: block;}
li.tab-current p {white-space: initial;}
</style>

实现效果:

以上就是关于帝国cms使用教程中"帝国cms如何实现有切换选项卡的图书推荐列表?"的全部内容,如果有遇到帝国cms使用教程其他问题的,可以在评论留言,或者加微信咨询。

帝国cms 选项卡

本文链接:http://so.lmcjl.com/news/415/

展开阅读全文
相关内容