一款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属性, ...
随机推荐
- linux乱码问题
命令输入: export LANG=zh_CN.GBK grep 匹配时高亮 先执行:export GREP_OPTIONS='--color=auto'; 后执行:grep 匹配内容 文件; 描述: ...
- linux下使用find xargs grep查找文件及文件内容
1,在某个路径下查文件. 在/etc下查找“*.log”的文件 find /etc -name “*.log” 2,扩展,列出某个路径下所有文件,包括子目录. find /etc -name “*” ...
- Linux命令之hwclock
转载:http://codingstandards.iteye.com/blog/804830 用途说明 hwclock命令,与clock命令是同一个命令,主要用来查询和设置硬件时钟(query an ...
- Linux 学习笔记 更多的bash shell命令
一 监测程序 1.ps 输出运行在系统上的所有程序的许多信息 运行ps命令,也会开启一个进程 默认情况下,ps命令只会显示运行在当前控制台下的属于当前用户的进程. Unix风格的参数(单破折号) - ...
- PHP.4-DIV+CSS标准网页布局准备工作(下)
DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...
- Number Game poj1143
Description Christine and Matt are playing an exciting game they just invented: the Number Game. The ...
- python(5)–sys模块
sys.argv 命令行参数list, 第一个元素是程序本身路径 sys.exit(n) 退出程序,退出时输入信息n sys.version 获取python解释程序的版本信息 sys.maxint ...
- InvocationTargetException
在使用反射的适合,调用的方法无论抛出什么异常,都会变成InvocationTargetException,要想得到原始的异常,必须使用getTargetException()
- vim粘贴代码格式变乱
转自netingcn.com 有时候从编辑器里面复制粘贴代码到vim中,代码格式会完全乱套.其原因是vim开启了smartindent(智能缩减)或autoindent(自动对齐)模式.为了保持代码的 ...
- hdu 4614 线段树
思路:当k为1的时候,用二分法查询包含有f个空瓶的上界r,然后更新会方便很多,直接更新区间(a,r)了. #include<iostream> #include<cstdio> ...