一款js点击显示和隐藏的例子(pc,移动端通用)
html部分: <div id="box">
<div id="box_title">标题</div>
<div id="box_content">11111111<br/>2222222<br/>333333</div>
</div>
css部分: <style>
#box {position:fixed;bottom:;z-index:;width:100%;}
#box_title {background: #ff2a2a;}
#box_content {display: none;}
</style>
js部分:
<script>
window.onload = function(){
document.querySelector("#box_title").addEventListener("click",function(){
var o = document.querySelector("#box_content")
if(o.className == '') {
o.style.display = 'block';
o.className = 'active';
}else{
o.style.display = 'none';
o.className = '';
}
},false);
} </script>
一款js点击显示和隐藏的例子(pc,移动端通用)的更多相关文章
- js如何实现点击显示和隐藏表格
js如何实现点击显示和隐藏表格 一.总结 一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...
- JS点击显示隐藏内容
JS点击显示隐藏密码 思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...
- js点击显示隐藏
这个栗子…… 可以不吃,先预设一个变量表示div的状态,例子中0是显示的,一开始是隐藏的.当点击时判断状态是显示0的还是隐藏1的:如果是显示的就把div隐藏,再把变量改变为1.再次点击时把会判断到变量 ...
- legend3---19、要更多的从服务器端控制元素的显示和隐藏,而不要是页面端
legend3---19.要更多的从服务器端控制元素的显示和隐藏,而不要是页面端 一.总结 一句话总结: 这样可以控制很多页面端的非法操作 1.html标签中data方式的数据,修改之后在标签上只显示 ...
- js密码修改显示与隐藏效果
一.添加input框 <form class="login_form"> <input class="password inputpwd" i ...
- js 与JQuery显示及隐藏方法
虽然以后两种方式都能让文本信息隐藏和显示 第一种文本隐藏以后还是会占居位置, 第二种则不会占位置. <p id="p1">这是一段文本.</p> <i ...
- vue点击切换样式,点击切换地址栏,点击显示或者隐藏
1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...
- js控制div显示与隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vueJS简单的点击显示与隐藏的效果
目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性, ...
随机推荐
- Python学习 之 函数
1.为什么要使用函数 (1)降低编程难度:将复杂的问题分解成简单的小问题 (2)代码重用 2.函数的定义 def 函数名(参数列表):#可以没有参数 函数体 3.函数缺省参数(默认参数):设置默认参数 ...
- Android检测是否安装了指定应用
检测是否安装了指定应用的方法如下: private boolean isAvilible( Context context, String packageName ) { final PackageM ...
- 分享一个java线程专栏
专栏 : java线程基础 转载自 http://blog.csdn.net/column/details/yinwenjiethread.html 专栏内容: 1.线程基础:线程(1)--操作系统和 ...
- Linux下的权限掩码umask
权限掩码umask 我们都知道在linux下创建一个文件或者目录之后是可以通过chmod等命令进行权限设置,来达到给当前用户.用户组用户以及其他用户分配不同的访问权限.那么,我们新创建的目录和文件本身 ...
- linux别名
alias: alias cdn ='cd /opt/lammp' [root@besttest /]# cdn[root@besttest lampp]# 如果想永久生效写进root/.bash ...
- JMS笔记(二)
接上篇 JMS笔记(一),启动ActiveMQ后,打开http://127.0.0.1:8161/admin管理界面,用户名admin密码admin,点击上面的Queues菜单,创建一个q_test_ ...
- vim 编辑器 打开GB2312、GBK文件乱码解决方法
安装好的操作系统一般都带有vim编辑器,但是默认不支持GB2312中文,打开文件出现乱码,解决办法如下. 1.打开以下文件 sudo vim /var/lib/locales/supported.d/ ...
- x264命令参数与代码中变量的对应关系
帧类型选项: -I/--keyint i_keyint_max 最大IDR帧间距,默认为250 -i/--min-keyint i_keyint_min 最小IDR帧间距,默认为25 --sce ...
- Java操作字符串的工具类
操作字符串的工具类 import java.io.ByteArrayOutputStream; import java.io.IOException; import java.io.PrintStre ...
- hdu1565 网络流或状态压缩DP
对于网络流有一个定理: 最小点权覆盖集=最大网络流: 最大点权独立集=总权值-最小点权覆盖集: 网络流解法代码如下: #include<cstdio> #include<iostre ...