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. Rhythmbox音乐播放器常见问题

    一.歌名中文乱码 对于所有用gstreamer做后端的播放器,如Rhythmbox, 设置如下的环境变量后即可正确读取mp3中GBK编码的id3 tag. export GST_ID3_TAG_ENC ...

  2. Java NIO学习笔记七 Non-blocking Server

    Java NIO:Non-blocking Server 即使你了解了Java NIO非阻塞功能的工作(怎么样Selector,Channel, Buffer等等),设计一个无阻塞服务器仍然很难.非阻 ...

  3. 利用jenkins做项目的自动化部署

    最近领导要求上海本地的项目需要使用进jenkins实现自动化部署,以便可以直接将项目移交给运维的同学,减轻开发的工作量.记录下这次爬坑的过程. 一.前言 Jenkins是基于Java开发的一种持续集成 ...

  4. promise(3) '静态'方法

    要是人没有梦想,跟咸鱼又有什么两样了?一直恐惧读源码,哪怕是一个简单的库也是读百来行遇到难点就放弃了.对于新的东西也仅仅是知道它拿来干什么,社区资源在哪里,要用时就突击文档资源使用即可.未有过深入之心 ...

  5. jqueryl操作dom文档实例

    <include file="Public:header"/> <link rel="stylesheet" href="../Pu ...

  6. 给linux虚拟机添加Samba用户

    Window系统连上我们的开发机Linux,自然需要在Samba里添加一个新用户. linux-06bq:/usr/local/services/samba/bin # ./smbpasswd -a  ...

  7. Azure MySQL PaaS (3) 创建MySQL异地只读数据库 (Master-Slave)

    <Windows Azure Platform 系列文章目录> Azure MySQL PaaS服务提供异地只读的功能,我们可以在主站点,比如Azure上海数据中心,创建MySQL主节点. ...

  8. 搭建nexus私服(maven)

    这里提供nexus的直接下载页面的链接: https://www.sonatype.com/download-oss-sonatype maven获取依赖jar包是从中央仓库获取,但很莫名的出现jar ...

  9. 最长非降子序列的O(n^2)解法

    这次我们来讲解一个叫做"最长非下降子序列"的问题及他的O(n^2)解法. 首先我们来描述一下什么是"最长非下降子序列". 给你一个长度为n的数组a,在数组a中顺 ...

  10. PHP连接数据库、创建数据库、创建表的三种方式

    这篇博客主要介绍了三种方式来连接MySQL数据库以及创建数据库.创建表.(代码是我在原来的基础上改的) MySQLi - 面向对象 MySQLi - 面向过程 PDO MySQLi 面向对象 < ...