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 ...
随机推荐
- java File获取字节流
/*文件64位编码*/ public static void main(String[] args) { byte[] fileByte = toByteArray(newFile); String ...
- Vue中 axios+QS 插件往后台传参
之前用Vue+element写了一个后台管理系统,在登录时使用axios请求数据传参时无法正常的获取数据.发现原因是传递参数要将参数序列化.这里使用了qs插件: 简单来说,qs 是一个增加了一些安全性 ...
- MySQL数据库3分组与单表、多表查询
目录 一.表操作的补充 1.1null 和 not null 1.2使用not null的时候 二.单表的操作(import) 2.1分组 2.1.1聚合函数 2.1.2group by 2.1.3h ...
- 【leetcode】837. New 21 Game
题目如下: 解题思路:这个题目有点像爬楼梯问题,只不过楼梯问题要求的计算多少种爬的方式,但是本题是计算概率.因为点数超过或者等于K后就不允许再增加新的点数了,因此我们可以确定最终Alice拥有的点数的 ...
- F5设备部署
旁挂组网(组网模式一) 所谓旁挂组网模式,就是指在BIG-IP LTM上只配置一个Vlan,使用一个端口(或者Trunk端口)连接在网络中,所有的处理均在这一个Vlan中运行.通常有三种常见配置模式. ...
- 代理修饰词weak/assign/strong的区别
基于项目报错: WebViewJavascriptBridgeBase 中定义:@property (assign) id <WebViewJavascriptBridgeBaseDelegat ...
- new Date(str)返回 Invalid date问题
var date=new Date($("input[name='mettingTime']").val().replace(/-/g, "/")); var ...
- volley简介
究竟什么是volley呢? 在以前的开发过程中,开发app的时候,使用的东西可能包括: 1.Httpclient,HttpURLConnection 2.AsyncTask,AsyncTaskLoa ...
- RedisTemplate访问Redis数据结构（四）——Set
Redis的Set是string类型的无序集合.集合成员是唯一的,这就意味着集合中不能出现重复的数据,Redis 中 集合是通过哈希表实现的,所以添加,删除,查找的复杂度都是O(1). SetOper ...
- LDAP常见错误码
LDAP_SUCCESS = 0 //成功 LDAP_OPERATIONS_ERROR = 1 //操作错误 LDAP_PROTOCOL_ERROR = 2 //协议错误 LDAP_TIME_LIMI ...