HTML:
<!--mui的switch开关-->
<div class="mui-content-padded">
<h5>switch开关mui-active开启状态</h5>
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</div> <div class="mui-content-padded">
<h5>mui-switch-blue:设置颜色</h5>
<div class="mui-switch mui-switch-blue">
<div class="mui-switch-handle"></div>
</div>
</div> <div class="mui-content-padded">
<h5>mui-switch-mini:无文字提示开关</h5>
<div class="mui-switch mui-switch-blue mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</div> <div class="mui-content-padded">
<h5>男女性别开关</h5>
<div class="mui-switch mui-switch-blue" id="gender">
<div class="mui-switch-handle"></div> </div> <div class="mui-content-padded">
<p class="mui-text-center" id="msg">这里是文字提示</p>
</div>
</div>
<!--点击按钮获取信息-->
<div class="mui-content-padded">
<button id="btn-get-gender" class="mui-btn mui-btn-blue">获取性别</button>
</div> JS:
监听事件函数:
document.getElementById('btn-get-gender').addEventListener('tap',function(){
//classList.contains('mui-active'):判断类名是否包含active,如果包含表示处于打开状态(ture)
var gender=document.getElementById('gender').classList.contains('mui-active')
console.log(gender)//ture/false if(gender==true){
document.getElementById("msg").innerHTML='女'
}else{
document.getElementById("msg").innerHTML='男'
}
})
 
 
 
 
 

mui的switch开关的应用的更多相关文章

  1. mui switch 开关js控制打开 & Cannot read property 'toggle' of null

    //打开开关 mui('#mySwitch').switch().toggle(); //小开关打开异常的情况解决办法$(".mui-switch-handle").attr(&q ...

  2. mui switch(开关)里面token不能及时更新

    做登录的时候再本地用locaStorage存了一个token值,但是登录之后进入页面里面发现一个switch开关里面的token值会跟着开关的切换在上一个token和当前的这个token值之间切换,我 ...

  3. 自定义switch开关

    自定义一个switch开关 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. CSS做一个Switch开关

    本文为博主原创,转载请注明出处. Switch开关: 根据需求可知,Switch开关只有两种选择,true或false.所以我们想到HTML的checkbox控件,用它来做. <input id ...

  5. 使用css3 制作switch开关

    使用css3来实现switch开关的效果: html代码: <!--switch开关--><div class="switch-btn"> <inpu ...

  6. 微信小程序组件解读和分析:十五、switch 开关选择器

    switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...

  7. elementui switch 开关,点击确认按钮后在进行开关

    <el-table-column label="上头条" align="center"> <template slot-scope=" ...

  8. 微信小程序 主题皮肤切换(switch开关)

    示例效果: 功能点分析: 1.点击switch开关,切换主题皮肤(包括标题栏.底部tabBar):2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果3.把设置保存到本地,退出应用再进来时,依然加 ...

  9. layui switch 开关监听 弹出确定状态转换

    不废话,直接上图: 原始状态:   点击确定: 点击取消或者X 代码: <!doctype html> <html lang="en"> <head& ...

随机推荐

  1. A1129. Recommendation System

    Recommendation system predicts the preference that a user would give to an item. Now you are asked t ...

  2. Day013--Python--内置函数一

    一.作用域相关(2) 1. globals()  查看全局空间作用域中的内容. 函数会以字典的类型返回全部全局变量. 2. locals()  查看当前空间作用域中的内容. 函数以字典的类型返回当前位 ...

  3. nginx 配置两个域名

    1.首先第一步安装: 参考:https://www.cnblogs.com/wyd168/p/6636529.html 启动: /usr/local/nginx/sbin/nginx -c /usr/ ...

  4. sprignclou的zuul的实战

    idea启动集群服务: https://blog.csdn.net/love_dl_forever/article/details/78918181 http://www.scienjus.com/a ...

  5. qml: 模块定义与使用

    1. 模块的定义qmldir Module   MyModule MyTest  1.0  MyTest.qml MyTest  1.3  MyTest.qml 2. 导入: 使用qrc: RESOU ...

  6. u-boot(二)makefile

    目录 u-boot(二)makefile 引入 目录结构(1.1.6) 配置文件 目标 配置具体的单板 编译阶段 过程 链接入口 配置链接地址 附录 附录A:mkconfig解析 附录B 链接脚本 t ...

  7. java FindMyIP.java

    s ganymed-ssh2-build210.jar package com.iteye.lindows.ssh.ip; import java.io.BufferedReader; import ...

  8. JAVA核心技术I---JAVA基础知识(文件系统及java文件基本操作)

    一:文件概述 文件系统是由OS(操作系统)管理的 文件系统和Java进程是平行的,是两套系统 文件系统是由文件夹和文件递归组合而成 文件目录分隔符 –Linux/Unix 用/隔开 –Windows用 ...

  9. Problems found loading plugins: Plugin "GlassFish Integration" was not loaded: required plugin "Java EE: EJB, JPA, Servlets" is disabled.

    idea启动报错:并且无法部署web项目 Problems found loading plugins: Plugin "GlassFish Integration" was no ...

  10. Web前端框架与移动应用开发第七章

    1.练习1:焦点图切换 html: <!doctype html><html><head> <meta charset="utf-8" / ...