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精神, ...
随机推荐
- 锁和监视器之间的区别 – Java并发
在面试中你可能遇到过这样的问题:锁(lock)和监视器(monitor)有什么区别? 嗯,要回答这个问题,你必须深入理解Java的多线程底层是如何工作的. 简短的答案是,锁为实现监视器提供必要的支持. ...
- 在Ubuntu中设置DNS域名服务器端
在Ubuntu中设置DNS域名服务器主要有四种方法: 一.设置全局静态DNS $ sudo vi /etc/resolvconf/resolv.conf.d/base(这个文件默认是空的),插入: n ...
- web存储之webstorage
web存储分类 客户端和服务端 认识web存储 随着web应用的发展,是的客户端存储的用途越来越多,然而实现客户端端存储的方式也是越来越多样化.最简单最兼容的方式就是cookie,但作为真正的客户端存 ...
- 深入理解 JavaScript 事件循环(一)— event loop
引言 相信所有学过 JavaScript 都知道它是一门单线程的语言,这也就意味着 JS 无法进行多线程编程,但是 JS 当中却有着无处不在的异步概念 .在初期许多人会把异步理解成类似多线程的编程模式 ...
- 【Appnium+C#+Winform自动化测试系列】前言
目录(后期持续更新) 一.前言 1.为什么选择Appnium 最近这些年APP保持着持续的火热,对应的APP测试行业也是跟着水涨船高.由于市场的需求,APP测试平台也涌出大量的自动化测试工具. 在对 ...
- Linux文件管理浅析(一) _磁盘管理基础
本文主要讨论一些磁盘管理相关的基本概念,同时也是这一系列文章的第一篇,就是下图中的最下一层的一部分. 在Linux中,SATA/USB/SCSI接口都是使用SCSI模块实现的,所以使用这些接口的硬盘在 ...
- LODOP之票据连续套打笔记<二>
接着上一篇博文,继续说说关于lodop,关于模板设计及相关的这里不多说了,上一篇博文最下面的推荐可以看看,说的很比较清楚,今天说说我在项目中运用套打实现分页预览和打印的, 之前弄lodop打印的时候发 ...
- CSS学习笔记05 display属性
HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...
- 【Android Developers Training】 84. 将定期更新的影响最小化
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 【笔记】记一次.net语法await和async的异步编程实验与笔记。
1.实践代码全记录: using System; using System.Collections.Generic; using System.Diagnostics; using System.Li ...