toggleClass() 方法做类似于微信扣扣点击语音图标按钮变成切换到语音输入功能,点击键盘图标按钮切换到文字输入状态的效果

就是这种效果的类似。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wo").click(function(){
$("#lala").toggleClass("main")
$("#haha").toggleClass("main")
});
});
</script>
<style type="text/css">
.main
{
display:none;
}
</style>
</head>
<body>
<div id="lala">
<div class="wo">我<span>555555</span></div>
</div>
<div id="haha" class="main">
<div class="wo">他<span>0000</span></div>
</div>
</body>
</html>
别忘记了引用JQrey哦~~~
toggleClass() 方法做类似于微信扣扣点击语音图标按钮变成切换到语音输入功能,点击键盘图标按钮切换到文字输入状态的效果的更多相关文章
- 带入gRPC:对 RPC 方法做自定义认证
带入gRPC:对 RPC 方法做自定义认证 原文地址:带入gRPC:对 RPC 方法做自定义认证项目地址:https://github.com/EDDYCJY/go... 前言 在前面的章节中,我们介 ...
- 领导让我重新做一个微信H5页面!
leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...
- android上instant app介绍 类似于微信小程序
android上instant app介绍 类似于微信小程序instant app 是谷歌推出的类似于微信小程序(或者说小程序类似于instant app)的一项技术,用户无须安装应用,用完就走,同时 ...
- jQuery的addClass,removeClass和toggleClass方法
jQuery的addClass,removeClass和toggleClass方法,最后一个方法在某一情形之下,可以替代前面2个方法. 第一个方法addClass为元素添加一个class. 第二个方法 ...
- jQuery addClass removeClass toggleClass方法概述
通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性 ...
- C#开发微信门户及应用(15)-微信菜单增加扫一扫、发图片、发地理位置功能
前面介绍了很多篇关于使用C#开发微信门户及应用的文章,基本上把当时微信能做的接口都封装差不多了,微信框架也积累了不少模块和用户,最近发现微信公众平台增加了不少内容,特别是在自定义菜单里面增加了扫一扫. ...
- react native 键盘遮挡按钮点击事件
在做项目的时候,我遇到一个很奇怪的问题,我先描述一下问题,在InputText输入内完成以后,点击按钮进行下一步的操作的时候,第一次点击的时候,按钮没有响应,第二次点击的时候才会响应.这样对用户体验有 ...
- Js制作点击输入框时默认文字消失的效果
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17) 为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢 ...
- 小程序中点击input控件键盘弹出时placeholder文字上移
最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的" ...
随机推荐
- JS学习笔记(四) 正则表达式(RegExp对象)
参考资料: 1. http://www.w3school.com.cn/js/js_obj_regexp.asp ☂ 知识点: ☞ RegExp是正则表达式的缩写. ☞ RegExp是一种模式,用于在 ...
- js文件的装载和执行
1.浏览器对script引用的js文件分两步,下载,下载完毕后马上执行:这两步都会阻塞浏览器继续解析. 2.加入defer属性,<script defer type="text/jav ...
- nyoj 1058部分和问题(DFS)
部分和问题 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 给定整数a1.a2........an,判断是否可以从中选出若干数,使它们的和恰好为K. 输入 首先, ...
- nyoj 19擅长排列的小明 (DFS)
擅长排列的小明 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序的全排列,如果你想 ...
- SQL Server索引 (原理、存储)聚集索引、非聚集索引、堆 <第一篇>
一.存储结构 在SQL Server中,有许多不同的可用排列规则选项. 二进制:按字符的数字表示形式排序(ASCII码中,用数字32表示空格,用68表示字母"D").因为所有内容都 ...
- Java多线程同步问题的探究
一.线程的先来后到——问题的提出:为什么要有多线程同步?Java多线程同步的机制是什么? http://www.blogjava.net/zhangwei217245/archive/2010/03/ ...
- input与lable水平对齐
CSSinput,label { vertical-align:middle;} html 格式 <label><input/></label> <labe ...
- Git学习(2)Git 安装
Windows 平台上安装 在 Windows 平台上安装 Git 同样轻松,有个叫做 msysGit 的项目提供了安装包,可以到 GitHub 的页面上下载 exe 安装文件并运行: 安装包下载地址 ...
- mysql 性能问题
1.场景,模拟一天的数据,每个10秒,遍历1000个设备,每个设备模拟一个实时数据,总的数据量为:24*60*60/10*1000 = 864万条记录.2.采用策略,对时间分段,拼接sql语句查询,对 ...
- 省市县distpicker的使用
下载地址https://github.com/fengyuanchen/distpicker 1.引入 <!-- 引入地址 begin --> <script type=" ...