html超级简单实现点赞(收藏)和取消赞效果
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超级简单实现点赞(收藏)和取消赞效果的更多相关文章
- css简单实现五角星评分、点赞收藏、展示评分(半颗星、1/3颗星)
1.前言 之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后copy过来.总觉得这样的话没有进步,没有把知识放进脑袋里,所以,自己花 ...
- jquery 超简单的点赞效果
1.HTML(可以优化一下,尽量少些几个标签.....) <div id="dianz"> <b class="cz"><em&g ...
- 微信小程序云开发-数据库和云函数的应用-点赞/收藏/评论功能
一.准备工作 1.创建数据库表articles,字段分别为: 序号 字段名称 字段类型 字段值 字段描述 备注说明 1 title string "标题1" 文章标题 2 de ...
- 33个超级有用必须要收藏的PHP代码样例
作为一个正常的程序员,会好几种语言是十分正常的,相信大部分程序员也都会编写几句PHP程序,如果是WEB程序员,PHP一定是必备的,即使你没用开发过大型软件项目,也一定多少了解它的语法. 在PHP的流行 ...
- JS基础(超级简单)
1 JS基础(超级简单) 1.1 数据类型 1.1.1 基本类型: 1) Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2) ...
- JavaScript,一个超级简单的方法判断浏览器的内核前缀
先说明,此处的方法是说超级简单的方法,不是指代码超级少,而是用非常简单的知识点,只要懂得怎么写JavaScript的行内样式就可以判断. 大家应该还记得JavaScript行内样式怎么写吧?(看来我是 ...
- zw版_Halcon图像交换、数据格式、以及超级简单实用的DIY全内存计算.TXT
zw版_Halcon图像交换.数据格式.以及超级简单实用的DIY全内存计算.TXT Halcon由于效率和其他原因,内部图像采用了很多自有格式,提高运行速度,但在数据交换方面非常麻烦. 特别是基于co ...
- phpexcelreader超级简单使用
phpexcelreader超级简单使用 该php类可以到官网下载:http://www.codeplex.com/PHPExcel,下载的文件不能直接使用要看下面的备注. 备注: 1.要将olere ...
- 哈,又一款超级简单的队列(MQ)实现方案来了~
开源的消息队列已经很多了,但大部分很重,实际环境下,很多可能只是使用到了一点功能而已,杀鸡使用牛刀,着实有些浪费了.很多时候,我们只想要一片绿叶,但它们给了我们整个的春天,很难消化.本着DIR精神, ...
随机推荐
- 深入理解 JavaScript 事件循环(一)— event loop
引言 相信所有学过 JavaScript 都知道它是一门单线程的语言,这也就意味着 JS 无法进行多线程编程,但是 JS 当中却有着无处不在的异步概念 .在初期许多人会把异步理解成类似多线程的编程模式 ...
- mysqldump 用法总结
mysqldump 备份 备份数据库 my_database $ mysqldump -uUSER -pPASSWD my_database > my_database.sql 备份数据库 my ...
- H.264格式,iOS硬编解码 以及 iOS 11对HEVC硬编解码的支持
H.264格式,iOS硬编解码 以及 iOS 11对HEVC硬编解码的支持 1,H.264格式 网络表示层NAL,如图H.264流由一帧一帧的NALU组成: SPS:序列参数集,作用于一系列连续的编码 ...
- RabbitMQ安装与初始配置
[TOC] 本文只讨论linux下的Rabbitmq安装. Erlang安装 rabbitmq依赖于Erlang,需先安装,推荐安装rabbitmq/erlang-rpm: #clone源码 git ...
- c++课程设计之菜单选择
a) 从键盘输入n个数,选择升序还是降序输出 b)创新了日历 c) 添加了射箭游戏 d)还加入了好玩的24点游戏 学生签名: 年 月 日 课程设计(论文)评阅意见 等 级 项 ...
- 解决Jenkins performance-plugin 解析jmeter jtl报告NumberFormatException "timeStamp"
报错日志: Performance: Failed to parse file '/var/lib/jenkins/jobs/Jmeter/jobs/jmeter-test/builds/14/per ...
- 我眼中的ASP.NET Core之微服务
### 前言 前几天在博客园看到有园友在分享关于微软的一个微服务架构的示例程序,想必大家都已经知道了,那就是[eShopOnContainers](https://github.com/dotnet- ...
- 2017寒假零基础学习Python系列之函数之 递归函数
什么是递归函数? 在函数内部,也可以继续调用其他函数,如果一个函数在内部调用本身,这个函数为递归函数举一个求n的阶乘的例子: def fact(n): if n == 1: return 1; els ...
- 原生js表单序列化----- FormData
<style type="text/css"> .progress{ height: 10px; width: 600px; border: 1px solid red ...
- Maven下从HDFS文件系统读取文件内容
需要注意以下几点 1.所以的包都是org.apache.hadoop.XXX 2.三个配置文件要放到指定文件夹中等待文件系统读取(src/main/resources):core-site.xml h ...