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小时内请删除资料，不得用于任何商业用途。否则后果自负！博主不保证资料的安全性！也不承担任何责任！切勿用博主分享的任何资料运营！
