Use html+css+js to achieve a simple like effect

When we browse articles on other websites, we can often see a like collection effect at the end of the article, which is very interesting. Today we will do it ourselves to achieve this effect.

(Learning video recommendation: html video tutorial)

css style

.like{ 
font-size:66px;  color:#ccc; cursor:pointer;}
.cs{color:#f00;}

html content

<p class="like">&#10084;</p>

js code

<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function () {            
            $(".like").click(function () {
                $(this).toggleClass(&#39;cs&#39;);                
            })
        })
    </script>

Effect display:

##Summary

Note: In actual operation, the background operation data must be linked, but it is all the same simple of.

Recommended tutorial:

html tutorial

The above is the detailed content of Use html+css+js to achieve a simple like effect. For more information, please follow other related articles on the PHP Chinese website!