jquery点击来回切换
做个笔记偶尔用有时记不住
方法一：
<div id="test">
test
</div>
$('#test').mouseover(function () {
$(this).addClass('a')
}).mouseout(function () {
$(this).removeClass('a')
})
方法二：
<div class="people_state">设为管理员</div>
<div class="people_state">设为管理员</div>
<js>
$(".people_state").each(function() {
$(".people_state").bind("click");
$(".people_state").toggle(function() {
$(this).html("取消管理员");
},function() {
$(this).html("设为管理员");
})
});
方法三：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
height: 600px;
width: 300px;
background-color: orange;
}
.a{
background-color: blue;
}
</style>
<title>Title</title>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="d">
sakdas
</div>
</body>
<script>
$('#d').mouseover(function () {
// 俩个状态来回切换
$(this).toggleClass('a')
}).mouseout(function () {
$(this).toggleClass('a')
})
</script>
</html>
方法四：
<html>
<div class="people_state" res="0">设为管理员</div>
<div class="people_state" res="0">设为管理员</div>
<js>
$(".people_state").click(function() {
var i=$(this).attr("res");
if(i==0){
$(this).attr("res","1");
$(this).html("");
$(this).html("取消管理员");
}else{
$(this).attr("res","0");
$(this).html("");
$(this).html("设为管理员");
}
});
jquery点击来回切换的更多相关文章
- jQuery点击缩略图切换大图代码
很多网站上都会有点击缩略图切换成大图的效果,下面来分享一下它的源码 还是先来看效果截图 运行文件 然后点击下一张 下面分享源代码 html文件 <!DOCTYPE html PUBLIC &qu ...
- jquery 点击事件切换样式
$('#FatherName').on('click', '.ClassName', function(e){ $('.ClassName').removeClass('active'); $(thi ...
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
- jquery 实现点击颜色切换
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- jquery叠加页片自动切换特效
查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...
- (17/24) webpack实战技巧：生产环境和开发环境并行设置,实现来回切换
1. 概述 生产环境和开发环境所需依赖是不同: --开发依赖:就是开发中用到而发布时用不到的.在package.json里面对应的就是devDependencies下面相关配置. --生产依赖: 就是 ...
- 基于jQuery点击缩略图右侧滑出大图特效
基于jQuery点击缩略图右侧滑出大图特效是一款基于strip.pkgd插件实现的点击左侧缩略图右侧滑出大图切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jQuery仿Flash横向切换焦点图
给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...
- 自己编写jQuery插件之Tab切换
自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...
随机推荐
- TLS漏洞：超过50万个电子邮件服务器容易受黑客攻击，太可怕了
2019年在流行的开源Exim电子邮件服务器软件中发现了一个关键的远程执行代码漏洞,至少有超过50万个电子邮件服务器容易受到远程黑客攻击.Exim是一种广泛使用的开源邮件传输代理(MTA)软件,为类似 ...
- kettle中使用mysql的tinyint 类型到slqserver的tinyint类型
各个数据库之间的类型 定义还是有差别的 一下是我在工作中遇到的一个很奇葩的问题 mysql 中的 tinyint 类型 插入到sqlserver 的tinyint 类型 插入到 sqlserver的 ...
- linux软件操作
操作 命令 ubuntu 源操作 源配置 https://www.cnblogs.com/wenlin-gk/p/11146228.html 源更新 sudo apt-get update 查看源中包 ...
- ESP8266-01
我的模块购买地址 https://buyertrade.taobao.com/trade/detail/tradeSnap.htm?tradeID=460212770243341548&sn ...
- SSM图片
非关系型数据,redis,mongoDB关系型数据,mysql,oracle 1.springmvc+spring+mybatis1.导入jar2.书写配置xml(applicationContext ...
- 超好用json转excel工具
给大家安利一个超实用的json数据转excel工具:http://www.yzcopen.com/doc/jsonexcel
- CSS中的 , > + ~
1.群组选择器(',') /* 表示既h1,又h2 */ h1, h2 { color: red; } 2.后代选择器(空格) /* 表示 h1 下面的所有 span 元素,不管是否以 h1 为直接父 ...
- H-ui.admin v3.1学习之路（一）：导航栏信息无法在内容区显示
注:我使用的是别人的模板文件在我的云盘“素材模板—H-ui.admin’中. 直接上代码: <li class="dropDown dropDown_hover"> & ...
- which statement is true for the class java.util.ArrayList?
A.集合中的元素是有序的 对 B.集合被保证为不可变的 错 C.集合中的元素被保证为唯一的 错 有序的 所以不唯一 D.集合中的元素使用一个唯一的键来存取 错 没有键 E.集合中的元 ...
- 9-10 November
cout 和 printf 在 C++ 中的实现:四舍六入五随缘.比如 printf("%.0lf\n", x=1.5) => 1. 标准做法:printf("%d ...