惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

GbyAI
GbyAI
J
Java Code Geeks
雷峰网
雷峰网
WordPress大学
WordPress大学
宝玉的分享
宝玉的分享
云风的 BLOG
云风的 BLOG
V
Visual Studio Blog
V
Vulnerabilities – Threatpost
S
Securelist
The Hacker News
The Hacker News
The Register - Security
The Register - Security
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Help Net Security
Help Net Security
G
Google Developers Blog
Hugging Face - Blog
Hugging Face - Blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
M
MIT News - Artificial intelligence
AI
AI
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
The GitHub Blog
The GitHub Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Schneier on Security
Schneier on Security
N
Netflix TechBlog - Medium
T
The Blog of Author Tim Ferriss
Google DeepMind News
Google DeepMind News
Hacker News - Newest:
Hacker News - Newest: "LLM"
H
Hacker News: Front Page
博客园 - 司徒正美
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
B
Blog
Microsoft Azure Blog
Microsoft Azure Blog
大猫的无限游戏
大猫的无限游戏
Security Latest
Security Latest
Engineering at Meta
Engineering at Meta
N
News and Events Feed by Topic
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
酷 壳 – CoolShell
酷 壳 – CoolShell
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
T
Threat Research - Cisco Blogs
U
Unit 42
V
V2EX
V2EX - 技术
V2EX - 技术
L
LINUX DO - 最新话题
aimingoo的专栏
aimingoo的专栏
Microsoft Security Blog
Microsoft Security Blog
Recorded Future
Recorded Future
P
Privacy & Cybersecurity Law Blog
美团技术团队
小众软件
小众软件
F
Fortinet All Blogs

追剧生活网

前端代替iframe的方法 - 追剧生活网 前端代替iframe的方法 - 追剧生活网 写领券工具时,遇到的问题 - 追剧生活网 写领券工具时,遇到的问题 - 追剧生活网 实例:php利用cURL传递post数据 - 追剧生活网 实例:php利用cURL传递post数据 - 追剧生活网 “无法启动程序,计算机丢失 MSVCP120.dll”终极解决办法 - 追剧生活网 “无法启动程序,计算机丢失 MSVCP120.dll”终极解决办法 - 追剧生活网 利用jQuery实现绑定按钮变色写法 - 追剧生活网 今天什么也不做,好好哭一场。 - 追剧生活网 今天什么也不做,好好哭一场。 - 追剧生活网 解决微信播放视频无法全屏 - 追剧生活网 解决微信播放视频无法全屏 - 追剧生活网 2020年,愿你我安康 - 追剧生活网 2020年,愿你我安康 - 追剧生活网 html5的video标签播放m3u8视频 - 追剧生活网 html5的video标签播放m3u8视频 - 追剧生活网
利用jQuery实现绑定按钮变色写法 - 追剧生活网
mengkun · 2020-05-12 · via 追剧生活网

这个功能经常在视频网站用到,你点击一个集数之后,那个集数按钮就会变色,你点击其他的地方变色不会消失,需要点另一个集数,之前的变色才会消失。如下gif图:

利用jQuery实现绑定按钮变色写法

代码演示(可直接运行):

<button class="bsbtn">1</button>
<button class="bsbtn">2</button>	
<button class="bsbtn">3</button>	
<button class="bsbtn">4</button>	
<button class="bsbtn">5</button>		


<!--引入jq-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--绑定代码-->
<script>
$(document.body).on("click", "button", function () {
   $(".bsbtn").css("background-color","#ffffff");
   $(".bsbtn").css("color","#4c4a4a");
   $(this).css("background-color","#2fb3ff");
   $(this).css("color","#ffffff");
});
</script>
<!--设置一些样式-->
<style>
button{
    width:50px;
    height:50px;
}
.bsbtn:hover {
    border: 3px solid #2fb3ff;
}
</style>