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 ...
随机推荐
- Codeforces 918 括号匹配 SGdp[i][j][k]
A B C #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) ...
- IntelliTrace调试
当您进行调试时,IntelliTrace 将在后台收集有关托管应用程序的数据,其中包括来自许多框架组件(例如 ADO.NET.ASP.NET 和 System.XML)的信息.这些 IntelliTr ...
- 《SaltStack技术入门与实践》—— Renderer组件
Renderer组件 本章节参考<SaltStack技术入门与实践>,感谢该书作者: 刘继伟.沈灿.赵舜东 前面我们已经提过使用Python语言编写state.sls文件.在SaltSta ...
- 使用Hybris Commerce User API读取用户信息时，电话字段没有返回
在使用Hybris Commerce User API读取一个user信息时,我遇到一个问题,在API返回的结构里没有包含期望看到的Phone字段. 仔细观察Swagger里对response结构的说 ...
- linux运维、架构之路-CentOS7
一.CentOS7介绍 1.CentOS7使用起来最大的变化就是服务管理 2.systemd是linux下的一种init软件,开发目标是提供更优秀的框架以表示系统服务间的依赖关系,并依此实现系统初始化 ...
- CSS-动画，让图片上的图形有涨起来的效果（逐渐变高）和（逐渐变长）
效果图: html: <div class="inner3"> <div class="over"> <img src=" ...
- React Native 之组件的定义
App.js 也可以认为是一个组件,那么此文件中能定义多个组件吗? 方式一 import Hello from './Hello' export default class App extends C ...
- 运输计划noip
靠!这道题TM搞了我好几天,真是烦死人!!!早上打了一个倍增的TM只有95分QAQ... 然后一气之下开始不断卡常,各种玄学优化,可是就是T..TAT.. 可恶!晚上我就直接打了个tarjan,还好跑 ...
- APIO2019解题报告
「APIO 2019」奇怪装置 题目描述 有无限个二元组,每个二元组为\(((t+\left\lfloor\frac{t}{B} \right\rfloor)\%A,t \% B)\),给出一些区间, ...
- [POJ1637]Sightseeing tour：混合图欧拉回路
分析 混合图欧拉回路问题. 一个有向图有欧拉回路当且仅当图连通并且对于每个点,入度\(=\)出度. 入度和出度相等可以联想到(我也不知道是怎么联想到的)网络流除了源汇点均满足入流\(=\)出流.于是可 ...