本操作需要下载附件引入相关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>
THE END