js-点击+加关注变成已关注,已关注状态时,鼠标滑动上的状态时取消关注
效果:

HTML:
<div class="rightBtn cur">+关注</div>
CSS:
.rightBtn{
width: 80px;
height: 30px;
background: rgba(200, 200, 200, 1);/*灰色*/
color: #fff;
text-align: center;
line-height: 30px;
border-radius: 2px;
cursor: pointer;
}
.cur {
background: #FB452F;
}
.rightBtn:hover {
background: #FF5844;
}
.cur:hover {
background: #FF5844;
}
JS:
$(".rightBtn").click(function(){
let flag=$(this).hasClass("hh");
if(flag){
$(this).text("+关注")
$(this).addClass("cur")
$(this).removeClass("hh")
}else{
// $(this).addClass()
$(this).text("已关注")
$(this).addClass("hh")
$(this).removeClass("cur")
}
})
$(".rightBtn").mouseover(function(){
let flag=$(this).hasClass("hh");
console.log(flag,888)
if(flag){
$(this).text("取消关注")
}else{
$(this).text("+关注")
}
})
$(".rightBtn").mouseout(function(){
let flag=$(this).hasClass("hh");
if(flag){
$(this).text("已关注")
}
})
JS:代码截图,便于看代码

js-点击+加关注变成已关注,已关注状态时,鼠标滑动上的状态时取消关注的更多相关文章
- js点击加载更多可以增加几条数据的显示
<div class="list"> <div class="one"> <div class="img" ...
- JS实现点击加载更多效果
适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊) 点击加载更多效果: 第一个和第二个参数分别是btn和ul的DOM(必填) ...
- 关于关注和取消关注的nodejs写法
本例子的关注和取消关注,是通过ajax的方法实现的:nodejs后台写好api接口:响应前台的ajax 先看ajax的代码实现: // 用户关注标签 function subscribe(uid, t ...
- 转:JS线程和JS阻塞页面加载的问题
前几日写了一篇文章,介绍了js阻塞页面加载的问题.当时是通过例子来验证的.今天,我介绍一下浏览器内核,从原理上介绍一下js阻塞页面加载的原因. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同 ...
- js实现动态加载脚本的方法实例汇总
本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...
- 性能优化之html、css、js三者的加载顺序
前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...
- Yii 1开发日记 -- Ajax实现点击加载下一页
功能实现:先输出一页的内容,然后点击加载下一页,如图 1.控制器中 /** * 消费记录:列出用户购买章节的记录 */ public function actionMyPayHis() { //点击加 ...
- js实现『加载更多』功能实例
DEMO : 滚动加载示例 关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...
- 基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
随机推荐
- 【Linux开发】编写属于你的第一个Linux内核模块
曾经多少次想要在内核游荡?曾经多少次茫然不知方向?你不要再对着它迷惘,让我们指引你走向前方-- 内核编程常常看起来像是黑魔法,而在亚瑟 C 克拉克的眼中,它八成就是了.Linux内核和它的用户空间是大 ...
- C学习笔记-指针
指针的概念 指针也是一个变量,指针变量的值是另一个变量的地址 换句话说就是,指针存放的是一个内存地址,该地址指向另一块内存空间 指针变量的定义 指向一个变量的变量 int *p = NULL; p = ...
- [Python3] 040 文件 一般使用
目录 文件 1. open 函数 2. with 语句 3. 先写再读 3.1 写 3.2 读 4. "位置"的查询与移动 4.1 tell() 4.2 seek(cookie, ...
- Firefox、IE、chrome浏览器和驱动下载地址
一.Firefox和驱动下载地址 selenium2.X最高支持的Firefox版本为46,使用selenium2.X的话不需要下载火狐驱动,只需要配置火狐的启动路径即可. Selenium3.0开始 ...
- .Net Core 3.0使用Grpc进行远程过程调用
因为.Net Core3.0已经把Grpc作为一等臣民了,作为爱好新技术的我,当然要尝鲜体验一下了,当然感觉是Grpc作为跨语言的产品做的相当好喽,比起Dubbo这种的,优势和劣势还是比较明显的. 我 ...
- SpringBoot项目打成Jar包时运行
使用java -jar ***.jar执行jar包的时候,会找jar包中的main()方法. 对于SpringBoot项目的Jar包,在META-INF目录下的MANIFEST.MF文件中,Main- ...
- Luogu P5068 [Ynoi2015]我回来了
题目 Ynoi难得的水题. 首先我们可以\(O(n^2)\)地求出任意两点之间的距离. 然后我们可以\(O(n^3)\)地求出对于任意一个点\(u\),跟它距离\(\le d\)的点的集合. 然后对于 ...
- BIML 101 - ETL数据清洗 系列 - BIML 快速入门教程 - 将文本文件(csv)数据导进数据库
第二节 将文本文件数据导进数据库 该小节介绍如何用BIML生成ssis包,将货币文本导入到数据库currency的表中. SSIS组件: Connection Manager组建管理connectio ...
- MySQL中文正常而mybatis查询出现乱码的解决方案
解决方案是在spring-mvc.xml文件中,加入 <mvc:annotation-driven> <mvc:message-converters> <bean cla ...
- 使用zookeeper报错 stat is not executed because it is not in the whitelist. envi is not executed because it is not in the whitelist.
在使用四字命令或者zk ui界面查看zookeeper集群时,出现如下提示: stat is not executed because it is not in the whitelist. envi ...