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. EF编辑

    //修改推荐的信息 var productRe = db.Shop_ProductRecommends.Single(item => item.Id == model.Id); productR ...

  2. 【Python3之基本数据类型,基本运算】

    一.基本数据类型 1.字符串 类:str 方法:选中str,按住command(ctrl)+左键跳转至对应的方法 创建 a = "hexin" a = str('hexin') 转 ...

  3. 多个项目MyEclipse中启动出现OutOfMemoryError: PermGen space如何解决

    在MyEclipse中启动程序运行,报错java.lang.OutOfMemoryError: PermGen space应该怎么办?这是eclipse 内存不够的原因. PermGen space的 ...

  4. Winform使用的一些常识

    ? 防止数据绑定的列动态添加 需要设置DataGridView的AutoGenerateColumns属性为False ---------------------------------------- ...

  5. API 接口规范

    整体规范建议采用RESTful 方式来实施. 1. 协议 API与用户的通信协议,总是使用HTTPs协议,确保交互数据的传输安全. 2. 域名 应该尽量将API部署在专用域名之下. https://a ...

  6. Normalize.css介绍,作用,使用方法

    介绍 Normalize.css 是一个很小的CSS文件(V5.0.0版本大小8KB),但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.c ...

  7. 【PHP】最详细PHP从入门到精通(四)——PHP中的字符串

     PHP从入门到精通 之PHP中的字符串 大家好,继续跟进PHP最详尽的知识更新,本周,跟大家重点讲一下PHP中字符串的使用.在PHP中,字符串是非常重要的一个概念,基本上大家想到的字符串的处理功能, ...

  8. 数组 list互转

    数组 list互转 String str[] = list.toArray(new String[]{}); List list= java.util.Arrays.asList(String str ...

  9. 6.javaweb之respose对象

    1.respose的生成的outer对象要优先于内置的out对象输出 response.setContentType("text/html;charaset=utf-8");//设 ...

  10. 论MyBatis日志

    Mybatis内置的日志工厂提供日志功能,具体的日志实现有以下几种工具: SLF4J Apache Commons Logging Log4j 2 Log4j JDK logging 具体选择哪个日志 ...