PbootCMS点赞后再次进入显示已赞效果
pbootcms点赞后再次进入显示已赞效果
本操作需要下载附件引入相关js才能实现哦
引入后到详情页面使用,如果需要在列表页面使用,可以适当修改相关参数
注意文件引用路径,本教程使用的是根目录路径哦,如果是模板路径使用PB相应标签即可,有疑问欢迎艾特我哦
HTML部分
<div class="likes"> <a href="{content:likeslink}" class="zan"><span class="zan-text">赞</span>(<span id="likes-num">{content:likes}</span>)</a> </div> <style> .likes { text-align: center; } .likes .zan { position: relative !important; } .likes a { height: 40px; line-height: 40px; display: inline-block; padding: 0 15px; background: #fff; border: 1px solid #4fc08d; color: #4fc08d; border-radius: 30px; transition: all .5s; -webkit-transition: all .5s; } .likes a.active, .likes a:hover { background: #4fc08d; color: #fff; transition: all .5s; -webkit-transition: all .5s; } .likes a span { text-align: center; margin: 0 3px; } .likes-tip { position: absolute; top: -45px; left: 50%; margin-left: -45px !important; margin-right: 0px !important; width: 90px; height: 30px; line-height: 30px; background: #4fc08d; border-radius: 3px; color: #fff; font-size: 14px; display: none; } .likes .zan:hover .likes-tip { display: block; } </style>
js部分
<script src="/libs/js/jQuery.cookie.js"></script> <script> var Like_status = jQuery.cookie('likes_{content:id}'); if( Like_status == 1 ){ $('.zan-text').empty().append('已赞'); $('.zan').addClass('active'); jQuery('.zan').append('<span class="tac likes-tip">您已点赞!</span>'); jQuery('.like-link').removeAttr('href'); } </script>
相关附件
文章出处:
版权声明:本文由微站Blog发布,如需转载请注明出处。
免责声明:微站技术博客所有资料搜集整理于互联网或者网友提供,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。资料获取后24小时内请删除资料,不得用于任何商业用途。否则后果自负!博主不保证资料的安全性!也不承担任何责任!切勿用博主分享的任何资料运营!