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 ...
随机推荐
- git 流程 rebase rename
git流程: git init --bare git checkout -b develop git checkout -b feature1 feature1: git add . git comm ...
- bzoj4238 & loj2881 电压 二分图判定+dfs树
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4238 https://loj.ac/problem/2881 题解 如果想要让每一条边都有电流 ...
- Django【第11篇】：Django之分页升级版本（组件）
分页组件 一.分页的实现与使用 class Pagination(object): """ 自定义分页 """ def __init__(s ...
- 【LOJ#6036】[雅礼集训2017Day4]编码
传送门 题意简述 判定 n 个含 ? 字符的二进制串是否存在一种把 0/1 填入 ? 中的方案使得任意两个串不具有前缀关系. (一个串最多一个 ?) Sol 二进制串 ,并且一个串最多一个 '?' 很 ...
- H5 FormData对象
FormData对象 2018年01月08日 14:31:53 阅读数:2635 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用aj ...
- 主席树（静态区间第k大）
前言 如果要求一些数中的第k大值,怎么做? 可以先就这些数离散化,用线段树记录每个数字出现了多少次. ... 那么考虑用类似的方法来求静态区间第k大. 原理 假设现在要有一些数 我们可以对于每个数都建 ...
- jquery获取元素
let $lis = $('#sidebar-menu li[to]')//获取sidebar-menu下包含to属性的li
- 最简单的flask项目详解
# 第一部分,初始化:所有的Flask都必须创建程序实例, # web服务器使用wsgi协议,把客户端所有的请求都转发给这个程序实例 # 程序实例是Flask的对象,一般情况下用如下方法实例化 # F ...
- Mysql中主键与索引
摘自: https://www.cnblogs.com/wicub/p/5898286.html 一.什么是索引?索引用来快速地寻找那些具有特定值的记录,所有MySQL索引都以B-树的形式保存.如果没 ...
- CS2001 VS编译错误
Severity Code Description Project File Line Suppression State Error CS2001 Source file 'C:\Workspace ...