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实现队列和栈
队列:队列其实就是我们生活中的排队现象,先进入的先出,后进入的后出,代码实现如下: public class Queue<E> { private int front;//队头一端,只允许 ...
- Spring Boot整合Mybatis出现错误java.lang.IllegalStateException: Cannot load driver class:com.mysql.cj.jdbc.Driver
错误描述: Caused by: java.lang.IllegalStateException: Cannot load driver class: com.mysql.cj.jdbc.Driver ...
- 阅读《Effective Java》每条tips的理解和总结（2）（持续更新）
15. 使类和成员的可访问性最小化 一个好用的类的属性必须要隐藏起来,干净的将它与类的api分离开来,类之间只通过api相互使用,降低他们之间的耦合性.为了做到这一点,建议根据情况选择尽可能低的访问级 ...
- 文本检错——中文拼写检查工具FASPell
最近因为相关项目需要考虑中文文本检错,然后就发现了爱奇艺发布的号称SOTA的FASPell已经开源代码,所以开始着手实现. 检错思想两步:一,掩码语言模型(MLM)产生候选字符:二,CSD过滤候选字符 ...
- 【NOIP2016提高A组8.12】礼物
题目 夏川的生日就要到了.作为夏川形式上的男朋友,季堂打算给夏川买一些生日礼物. 商店里一共有种礼物.夏川每得到一种礼物,就会获得相应喜悦值Wi(每种礼物的喜悦值不能重复获得). 每次,店员会按照一定 ...
- 链表中倒数第k个节点(python)
题目描述 输入一个链表,输出该链表中倒数第k个结点. 无力吐槽牛客网... class Solution: def FindKthToTail(self, head, k): # write code ...
- 阿里云服务器tomcat能启动，但是不能访问问题。
显示时间过长. 解决方案: 可以看到就可以访问了.百度云的就没有这个问题.
- React 进阶设计与控制权问题
控制权--这个概念在编程中至关重要.比如,"轮子"封装层与业务消费层对于控制权的"争夺",就是一个很有意思的话题.这在 React 世界里也不例外.表面上看,我 ...
- Fabric基础架构原理（二）
Fabric 的网络节点本质上是互相复制的状态机,节点之间需要保持相同的账本状态.为了实现这个目的,各个节点需要通过共识( consensus )过程,对账本状态的变化达成一致性的认同. Fabric ...
- 移动端续讲及zepto移动端插件外加touch插件介绍
媒体查询:针对不同设备,显示不同的样式. 设备像素比:dpr device-piexl-ratio 在he开发中,要一个3陪高清图片: 1080>=320*3 (主要是为了解决图片的失真问题) ...