Home >Web Front-end >HTML Tutorial >Use html+css+js to achieve a simple like effect

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

王林
王林forward
2020-11-06 16:31:544229browse

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:

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

##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!

Statement:
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete