pbootCMS 点赞后再次进入显示已赞效果 本操作需要下载附件引入相关js才能实现哦 引入后到详情页面使用，如果需要在列表页面使用，可以适当修改相关参数 注意文件引用路径，本教程使用的是根目录路径哦，如果是模板路径使用PB相应标签即可 html部分 .likes a { height: 40px; line-height: 40px; display: inline-block; padding: 0 15px; background: #fff; border: 1px solid #4 […]
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>
