admin 发表于 2021-10-31 08:25

PB点赞后再次进入显示已赞效果

PbootCMS点赞后再次进入显示已赞效果本操作需要下载附件引入相关js才能实现哦引入后到详情页面使用,如果需要在列表页面使用,可以适当修改相关参数注意文件引用路径,本教程使用的是根目录路径哦,如果是模板路径使用PB相应标签即可,有疑问欢迎艾特我哦html部分 .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>PB相关附件下载如下:
页: [1]
查看完整版本: PB点赞后再次进入显示已赞效果