1.前言 
我们经常会遇到对一些列表呀进行点赞呀收藏数据等效果呀。今天就用html+css实现超级简单易上手的点赞和取消赞的demo展示。 
2.详情 
1.css样式

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

2.html内容

<p class="like">❤</p>

3.js代码

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

4.展示效果

3.总结 
是不是超级简单和实用呢?但是呢,现实操作中肯定是要联动后台操作数据的,不过呢,都是一样简单的。

html超级简单实现点赞(收藏)和取消赞效果的更多相关文章

  1. css简单实现五角星评分、点赞收藏、展示评分(半颗星、1/3颗星)

    1.前言 之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后copy过来.总觉得这样的话没有进步,没有把知识放进脑袋里,所以,自己花 ...

  2. jquery 超简单的点赞效果

    1.HTML(可以优化一下,尽量少些几个标签.....) <div id="dianz"> <b class="cz"><em&g ...

  3. 微信小程序云开发-数据库和云函数的应用-点赞/收藏/评论功能

    一.准备工作 1.创建数据库表articles,字段分别为: 序号 字段名称 字段类型 字段值 字段描述 备注说明 1 title string "标题1" 文章标题   2 de ...

  4. 33个超级有用必须要收藏的PHP代码样例

    作为一个正常的程序员,会好几种语言是十分正常的,相信大部分程序员也都会编写几句PHP程序,如果是WEB程序员,PHP一定是必备的,即使你没用开发过大型软件项目,也一定多少了解它的语法. 在PHP的流行 ...

  5. JS基础(超级简单)

    1     JS基础(超级简单) 1.1 数据类型 1.1.1   基本类型: 1)        Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2)       ...

  6. JavaScript,一个超级简单的方法判断浏览器的内核前缀

    先说明,此处的方法是说超级简单的方法,不是指代码超级少,而是用非常简单的知识点,只要懂得怎么写JavaScript的行内样式就可以判断. 大家应该还记得JavaScript行内样式怎么写吧?(看来我是 ...

  7. zw版_Halcon图像交换、数据格式、以及超级简单实用的DIY全内存计算.TXT

    zw版_Halcon图像交换.数据格式.以及超级简单实用的DIY全内存计算.TXT Halcon由于效率和其他原因,内部图像采用了很多自有格式,提高运行速度,但在数据交换方面非常麻烦. 特别是基于co ...

  8. phpexcelreader超级简单使用

    phpexcelreader超级简单使用 该php类可以到官网下载:http://www.codeplex.com/PHPExcel,下载的文件不能直接使用要看下面的备注. 备注: 1.要将olere ...

  9. 哈,又一款超级简单的队列(MQ)实现方案来了~

    开源的消息队列已经很多了,但大部分很重,实际环境下,很多可能只是使用到了一点功能而已,杀鸡使用牛刀,着实有些浪费了.很多时候,我们只想要一片绿叶,但它们给了我们整个的春天,很难消化.本着DIR精神, ...

随机推荐

  1. angularjs下拉框实现渲染html

    angualrjs处于安全的考虑,插值 指令会对相应字符串进行过滤,避免出现html攻击.但是在一些时候,我们需要渲染html,比如实现一个分级的下拉框,代码如下: <body ng-app=& ...

  2. 不再迷惑,无值和NULL值的转换

    在关系型数据库的世界中,无值和NULL值的区别是什么?一直被这个问题困扰着,甚至在写TSQL脚本时,心有戚戚焉,害怕因为自己的一知半解,挖了坑,贻害后来人,于是,本着上下求索,不达通幽不罢休的决心(开 ...

  3. 【知识整理】这可能是最好的RxJava 2.x 入门教程(三)

    这可能是最好的RxJava 2.x入门教程系列专栏 文章链接: 这可能是最好的RxJava 2.x 入门教程(一) 这可能是最好的RxJava 2.x 入门教程(二) GitHub 代码同步更新:ht ...

  4. 通过 pxe(网络安装)完成centos 系统的网络安装

    首先交代环境.本地2台主机,一台windows主机,一台等待安装centos的主机.2台主机在同一个局域网.通过路由器自动获取ip上网. 网上大多数pxe安装方式都采用自己搭建dns服务器的方式来进行 ...

  5. PHP中小小的header函数

    不废话,直接说功能 1.重定向,语法: header("location:http://www.lemon-x.ga"); file_put_contents("./te ...

  6. eclipse中Build Path 导入的包和复制到 lib 包的区别

    Java Build Path是我们编译需要的包,在比如在import ***.***.***时如果没用Java Build Path导入包的话类里面就有红叉,说不识别这个类,build path只是 ...

  7. [leetcode-537-Complex Number Multiplication]

    Given two strings representing two complex numbers. You need to return a string representing their m ...

  8. Codeforces 818B Permutation Game

    首先看一下题目 B. Permutation Game time limit per test 1 second memory limit per test 256 megabytes input s ...

  9. iOS9新特性之常见关键字、泛型

    #pragma mark -- nullable nullable:可以为空,只能修饰对象,不能修饰基本数据类型 // 方式一: @property (nonatomic, copy, nullabl ...

  10. CentOS7.2上用KVM安装虚拟机window10踩过的坑

    最近两个星期一直在琢磨kvm安装window10操作系统,并且通过桥接模式与外界通信,经历了九九八十一难,终于搞定.下面就记录以下我们在探索的过程中踩过的坑. 安装KVM 1. 系统要求:需要一台可以 ...