帝国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模板调用教程之——万能标签的详细说明(一)
帝国cms万能标签的调用方法,非常适用于新手站长,万能标签的调用语句简单,简洁,在模板里面,也方便我们排查问题。自定义的标签模板,灵活性很好。下面是青青模板网整理的关于帝国cms万能标签的调用方法说明,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms调用教程2022-04-01 -
帝国cms编辑器如何上传音乐?
帝国cms可以在编辑器上传mp3格式的音乐,找到编辑器的"视频"图标,点击上传,文件选中后,再修改参数值,将高宽删除。默认是自动播放的,要取消自动播放,删除以下代码就可以手动播放了。
帝国cms使用教程2022-03-27 -
帝国cms内容页调用图片集的图片
帝国cms内容页调用图片集的图片,也是青青在使用帝国cms程序过程中经常会遇到的。下面是青青模板网整理的关于本篇内容在“帝国cms常见问题”中的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms常见问题2022-03-26 -
帝国cms模板调用教程之——批量替换模板字符
帝国cms后台系统有批量替换模板字符的功能,只需要把输入原字符和新字符,再勾选应用的模板,就可以实现批量替换。接下来是青青模板网整理的关于帝国cms批量替换模板字符的操作方法,供大家参考。
帝国cms调用教程2022-03-30 -
帝国cms怎么用灵动标签调用信息的标题分类名称和地址?
帝国cms如何用灵动标签调用信息的标题分类名称和地址?下面是青青模板网整理的关于帝国cms灵动标签调用标题分类名称和地址的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms常见问题2022-03-28 -
帝国cms7.5版的编辑器如何保留word格式?
7.5版的编辑器默认会清除多余的word代码,如果要保留word格式怎么修改?下面是青青模板网整理的关于帝国cms7.5版的编辑器如何保留word格式的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms使用教程2022-04-08 -
帝国cms怎么实现灵动标签调用信息标题并且排除当前文章?
在内容页模板用灵动标签调用信息标题,如果要排除显示当前信息的话,应该怎么调用呢?下面是青青模板网整理的解决方案,供大家参考。
帝国cms常见问题2022-03-28 -
帝国cms内容页如何实现用键盘放左右键翻页?
帝国cms要在内容页实现键盘翻页,功能需求:方向键左、右键实现打开上一篇、下一篇,回车键返回栏目目录。下面是青青模板网整理的关于内容页实现键盘左右键翻页的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms使用教程2022-03-29 -
帝国cms内容页模板用if来判断信息来源为空的调用方法
如果网站使用的是帝国cms后台,在前端页面有一个固定显示信息来源的标签,假如来源为空,那么整个前端字段如何做到为空就不显示?用if来判断的话应该怎么写,下面是青青模板网整理的关于怎么在帝国cms内容模板判断信息来源的方法。
帝国cms常见问题2022-04-04 -
帝国cms批量修改数据信息字段的方法
帝国cms批量修改数据信息字段的方法,也是青青在使用帝国cms程序过程中经常会遇到的。下面是青青模板网整理的关于如何在帝国cms批量修改数据信息字段的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms使用教程2022-12-13