一款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属性, ...
随机推荐
- 最新搭建GIT服务器仓库
新开了一个项目,现在需要将代码放在公司GIT服务器上面.所以这里需要了一些问题..记录一下.因为原来公司这边的服务器的git用户都是创建好的.这里没有创建.需要的可以看看:http://www.cnb ...
- C语言之指针与数组总结
和指针相关的问题口诀1: 1. 地址变量得地址,得谁地址指向谁 和指针相关的问题要画图: 内容变量画房子,指针画箭头 ---->口 ------------------------------- ...
- Android(java)学习笔记110:ScrollView用法
理论部分 1.ScrollView和HorizontalScrollView是为控件或者布局添加滚动条 2.上述两个控件只能有一个孩子,但是它并不是传统意义上的容器 3.上述两个控件可以互相嵌套 4. ...
- 树形菜单 jsTree 使用方法
jsTree版本:3.0.4 在ASP.NET MVC中使用jsTree Model: public class Department { public int Id { get; set; } pu ...
- cocos2d-x——在一个cpp中展示多个场景
//20秒后自动运行下一个场景 runAction( CCSequence::create(CCDelayTime::create(20.0f), CCCallFunc::create(this, c ...
- c编写程序完成m名旅客和n辆汽车的同步程序代写
jurassic公园有一个恐龙博物馆和一个公园,有m名旅客和n辆汽车,每辆汽车仅能允许承载一名旅客.旅客在博物馆参观一阵,然后排队乘坐旅行车.当一辆车可用时,他载入一名旅客,再绕花园行驶任意长的时间. ...
- Autowired properities class
1. Properties类 @ConfigurationProperties(locations = "classpath:build.properties") @JsonInc ...
- IP地址,子网掩码、默认网关,DNS理论解释
在网上发现的这篇文章写的非常好,有理论有示例. (一) 问题解析 001. 问: IP地址,子网掩码,默认网关,DNS服务器,有什么区别呀?我知道没有IP地址就不能上网,我也知道没设DNS就不 ...
- Wince 对话框程序设计
如何编程实现wince下“打开文件夹对话框”呢?这里就要涉及到下面要分析的知识了,对话框是一种特殊的窗口,它在wince 作为应用程序和程序使用者之间的交流窗口,通过显示和获取信息使人们的交流更加方便 ...
- Spring 简单入门实例
首先新建一个Web 项目 导入相应Jar 包 <?xml version="1.0" encoding="UTF-8"?> <beans xm ...