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精神, ...
随机推荐
- 使用JPA和Hibernate进行批量处理的最佳方式
Tips 原文作者:Vlad Mihalcea 原文地址:The best way to do batch processing with JPA and Hibernate 在本文中,你将了解什么是 ...
- AngularJS高级程序设计读书笔记 -- 大纲篇
零. 初衷 现在 AngularJS 4 已经发布了, 楼主还停留在 1.x 的阶段, 深感自卑. 学习 AngularJS 的初衷是因为, 去年楼主开始尝试使用 Flask 开发自动化程序, 需要用 ...
- 自动清理SQLServerErrorLog错误日志避免太大
问题描述:开启SQLServer自动备份后,备份文件越来越多,有没有及时清理,导致服务器空间不足,备份出错,以至于出现几个G的ErrorLog文件,影响系统的登录管理. 解决办法:定期清理SQLSer ...
- C++ 安全单例模式总结
前两天,一个C++ 的单例实现又掉坑里了.做好一个安全的单例模式可并不简单.这里总结一下C++ 的几个单例实现方案. 1. 函数静态变量法 利用单例函数的静态变量,实现单例构造.代码如下: class ...
- JSONArray用法jquery循环list<Map>对象
controoler中 List<Map<String,Object>> resList =(List<Map<String,Object>>)resM ...
- JAVA上传与下载
java下载指定地址的文件 package com.test; import java.io.FileNotFoundException; import java.io.FileOutputStrea ...
- Chapter 3. Video Coding Concepts
本章主要介绍一些有关视频编码的概念 时域模型(Temporal Model) 时域模型的作用是去除帧间冗余.如:将第二帧减去第一帧,得到的剩余信息,其能量会远小于第二帧本身. 基于块的运动估计和补偿 ...
- JavaScript对象属性访问的两种方式
JavaScript对象属性访问的两种方式 object.attribute object["attribute"] 例如: var employees = [ { "f ...
- Ext 常用组件解析
Ext 常用组件解析 Panel 定义&常用属性 //1.使用initComponent Ext.define('MySecurity.view.resource.ResourcePanel' ...
- 使用matplotlib绘制多轴图
一个绘图对象(figure)可以包含多个轴(axis),在Matplotlib中用轴表示一个绘图区域,可以将其理解为子图.上面的第一个例子中,绘图对象只包括一个轴,因此只显示了一个轴(子图).我们可以 ...