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

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

本操作需要下载附件引入相关js才能实现哦

引入后到详情页面使用，如果需要在列表页面使用，可以适当修改相关参数

注意文件引用路径，本教程使用的是根目录路径哦，如果是模板路径使用PB相应标签即可，有疑问欢迎艾特我哦

html部分

1. .likes a {
   
2.   height: 40px;
   
3.   line-height: 40px;
   
4.   display: inline-block;
   
5.   padding: 0 15px;
   
6.   background: #fff;
   
7.   border: 1px solid #4fc08d;
   
8.   color: #4fc08d;
   
9.   border-radius: 30px;
   
10.   transition: all .5s;
    
11.   -webkit-transition: all .5s;
    
12. }
    
13. 
    
14. .likes a.active, .likes a:hover {
    
15.     background: #4fc08d;
    
16.     color: #fff;
    
17.     transition: all .5s;
    
18.     -webkit-transition: all .5s;
    
19. }
    
20. 
    
21. .likes a span {
    
22.   text-align: center;
    
23.   margin: 0 3px;
    
24. }
    
25. 
    
26. .likes-tip {
    
27.   position: absolute;
    
28.   top: -45px;
    
29.   left: 50%;
    
30.   margin-left: -45px !important;
    
31.   margin-right: 0px !important;
    
32.   width: 90px;
    
33.   height: 30px;
    
34.   line-height: 30px;
    
35.   background: #4fc08d;
    
36.   border-radius: 3px;
    
37.   color: #fff;
    
38.   font-size: 14px;
    
39.   display: none;
    
40. }
    
41. 
    
42. .likes .zan:hover .likes-tip {
    
43.   display: block;
    
44. }
    
45. </style>

复制代码

js部分

1. <script src="/libs/js/jQuery.cookie.js"></script>
   
2. <script>
   
3. var Like_status = jQuery.cookie('likes_{content:id}');
   
4. if( Like_status == 1 ){
   
5.   $('.zan-text').empty().append('已赞');
   
6.   $('.zan').addClass('active');
   
7.   jQuery('.zan').append('<span class="tac likes-tip">您已点赞！</span>');
   
8.   jQuery('.like-link').removeAttr('href');
   
9. }
   
10. </script>

复制代码

PB相关附件下载如下：

jQuery.cookie.zip (1.44 KB, 下载次数: 0, 售价: 1 丢币)

2021-10-31 08:25 上传

点击文件名下载附件
PB点赞后再次进入显示已赞效果