效果:

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-点击+加关注变成已关注,已关注状态时,鼠标滑动上的状态时取消关注的更多相关文章

  1. js点击加载更多可以增加几条数据的显示

      <div class="list"> <div class="one"> <div class="img" ...

  2. JS实现点击加载更多效果

    适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

  3. 关于关注和取消关注的nodejs写法

    本例子的关注和取消关注,是通过ajax的方法实现的:nodejs后台写好api接口:响应前台的ajax 先看ajax的代码实现: // 用户关注标签 function subscribe(uid, t ...

  4. 转:JS线程和JS阻塞页面加载的问题

    前几日写了一篇文章,介绍了js阻塞页面加载的问题.当时是通过例子来验证的.今天,我介绍一下浏览器内核,从原理上介绍一下js阻塞页面加载的原因. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同 ...

  5. js实现动态加载脚本的方法实例汇总

      本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...

  6. 性能优化之html、css、js三者的加载顺序

    前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...

  7. Yii 1开发日记 -- Ajax实现点击加载下一页

    功能实现:先输出一页的内容,然后点击加载下一页,如图 1.控制器中 /** * 消费记录:列出用户购买章节的记录 */ public function actionMyPayHis() { //点击加 ...

  8. js实现『加载更多』功能实例

    DEMO : 滚动加载示例 关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...

  9. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

随机推荐

  1. POJ - 3469 Dual Core CPU (最小割)

    (点击此处查看原题) 题意介绍 在一个由核A和核B组成的双核CPU上执行N个任务,任务i在核A上执行,花费Ai,在核B上执行,花费为Bi,而某两个任务之间可能需要进数据交互,如果两个任务在同一个核上执 ...

  2. PHP 补零操作

    str_pad(string,length,pad_string,pad_type)//参数 描述string //必需.规定要填充的字符串.length //必需.规定新的字符串长度.如果该值小于字 ...

  3. USB fuzzing

    简介 最近看一些USB fuzzing方面的东西,总结一下.主要是软件方面的工作. vUSBf 文章在这里:https://www.blackhat.com/docs/eu-14/materials/ ...

  4. java 如何编写多线程的代码

    线程是干活的所以线程一定是Thread,或者改线程实现Runnable接口多线程是竞争关系,所以多个线程竞争同一个资源,也就是同一个对象所以这个竞争对象发到Thread中即: // resources ...

  5. Postman之简单使用

    前提:已获得接口文档 / 抓包数据 1.启动Postman 直接在这个页面输入数据(不用管其他的地方!!!) 2.按照接口文档填入 注意蓝色框中的数据 请求方式:POST(几乎都是使用POST/GET ...

  6. java中的包注意事项

    1:需要导入包的三个地方 a:需要导入第三方的jar包中的类或接口 b:需要导入除了java.lang包的其他包中的类(jdk中的类) c:需要导入自己写的不同包的类 2:引入包的三种方式 a:imp ...

  7. postgresql 服务无法启动,日志中报如下错误

    1.postgresql 服务无法启动,日志中报如下错误,磁盘空间足够. 无法找到来自源 PostgreSQL 的事件 ID 0 的描述.本地计算机上未安装引发此事件的组件,或者安装已损坏.可以安装或 ...

  8. Linux cat命令详解(连接文件并打印到标准输出设备上)

    cat:连接文件并打印到标准输出设备上 一.命令格式: cat [-AbeEnstTuv] [--help] [--version] filename 二.参数说明: -n 或 --number:由 ...

  9. 07 Python中zip(),map(),filter(),reduce()用法

    一. zip() zip() 函数用于将可迭代的对象作为参数,将对象中对应的元素打包成一个个元组,然后返回由这些元组组成的列表. 如果各个迭代器的元素个数不一致,则返回列表长度与最短的对象相同,利用 ...

  10. js 获取当前月份 第一天和最后一天

    js 获取当前月份 第一天和最后一天 var now = new Date(); //当前日期 var nowMonth = now.getMonth(); //当前月 var nowYear = n ...