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精神, ...
随机推荐
- ASP.NET MVC5(四):数据注解和验证
前言 用户输入验证的工作,不仅要在客户端浏览器中执行,还要在服务端执行.主要原因是客户端验证会对输入数据给出即时反馈,提高用户体验:服务器端验证,主要是因为不能完全信任用户提供的数据.ASP.NET ...
- 手动添加git到目录右键菜单
1.通过在"运行"中输入'regedit',打开注册表. 2.找到[HKEY_CLASSES_ROOT\Directory\Background]. 3.在[Backgroun ...
- Mybatis中javaType和jdbcType对应和CRUD例子
JDBC Type Java Type CHAR String VARCHAR String LONGVARCHAR String NUMERIC java.math.BigDecimal DECIM ...
- UIPopoverPresentationController使用
UIPopoverPresentationController是什么? iOS8.0之后引入的一个方便开发者创建带箭头的弹出控制器,类似qq消息页面点击右上角加号弹出的视图. UIPopoverPre ...
- 按enter 进行搜索 enter提交表单
//按enter 进行搜索 document.onkeydown = function(e){ var ev = document.all ? window.event : e; if(ev.keyC ...
- 枚举:enum——初写
入门的时候,针对某一字段状态的判断,一开始是在前端用if else 判断,有一些弊端:①把内置的code暴露给用户②if else最好不要超过3层③前端很长一段冗余判断不规范后改进使用枚举,在后台进行 ...
- 用CSS3实现无限循环的无缝滚动
有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)? 克隆A一份完全一样的数据B放在原数据A的后面: 使用setIn ...
- Java基础(2)-基础类型
java基础类型 基础类型 package knowledge.base; public class Properties { /** * 整型 * int 4字节 -2 147 483 648 ~2 ...
- C#调用TSC条码打印机打印二维码
#region 调用TSC打印机打印 /// <summary> /// 调用TSC打印机打印 /// </summary> /// <param name=" ...
- gulp 运用 的理解
ugulp.task('build', function() { runSequence('clean', 'copy', ['uglify', 'sass', 'htmlmin'], 'base64 ...