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>