前端div的隐藏与展示控制

需求：在项目中，需要在点击不同按钮时展示不同的div，另外，在初始进入页面时只想看见第一个div的展示，其他的div在点击对应按钮时才展示。
在寻求解决办法的过程中，找到控制展示及隐藏的属性visibility以及display，前者是在隐藏时仍让div占据位置，后者释放空间，看不到占位。
适合我的需要的是display。
解决办法：
html部分

<div class="video-show1" id="div1"> //初始进入时需要展示的div<div class="window1" alt="1"></div>
</div>
<div class="video-show4" id="div4" style="display:none"> //在点击按钮时展示的div<div class="window4" alt="1"></div><div class="window4" alt="2"></div>
</div>

js部分（用的按钮的控制）

btn1() {document.getElementById("div1").style.display = "block";//show当前divdocument.getElementById("div4").style.display = "none";//hidden当前div
},
btn2() {document.getElementById("div1").style.display = "none";document.getElementById("div4").style.display = "block";
},

这个实现的方法是点击按钮1触发div1显示，div4隐藏；点击按钮2触发div4显示，div1隐藏。

前端div的隐藏与展示控制相关推荐

jquery---元素的隐藏与展示
jQuery的元素隐藏与展示控制的是元素的display属性,展示时:dispaly: block:隐藏时:display: none. 点击切换元素展示状态选中元素点击会切换显示状态,如果disp ...
js控制div属性隐藏方法
原文详解:js控制div属性隐藏方法如题:编写html时如何用js控制div的显示和隐藏. 假定页面展示内容如下: 1.点击触发事件: <div><button class=&qu ...
前端显示和隐藏div的方法 / 判断
前端 div 模块的显示和隐藏方法: 一.加载页面时隐藏再显示 : 三种方法,亲测可行~~ <%@ page language="java" contentType=& ...
Vue实现点击按钮上下滑动隐藏或展示查询条件
如图中的是jquery实现的,那么在vue中如何实现呢? 结合自己的项目进行了整合,具体的额模块代码如下所示: 第一步新建组件js 建个JS文件,随便取个名字,把下面的js复制进去,我这里叫moreS ...
jquery点击非div区域隐藏div
点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框 html代码 <div class=&qu ...
easyui datagrid表格头部鼠标右键进行列隐藏和展示
1.实现datagrid自定义初始化onHeaderContextMenu方法新增文件jquery.easyui.datagrid.column.js // 动态改变列头.var cmenu;fun ...
前端文字超出以省略号展示
前端文字超出以省略号展示  white-space: nowrap;  overflow: hidden; & ...
html判断隐藏显示,js 判断DIV是否隐藏的方法
js脚本在控制div元素在显示与隐藏之间进行切换时,如果不能确定div当前的状态,切换时往往会发生一些逻辑错误的事情,导致div元素的动态效果在切换时不是很流畅.那么飞鸟慕鱼博客就来说一说,如何判断d ...
html中的div怎么隐藏显示出来,js实现元素div/ul li的显示与隐藏
在网页设计过程中,某些时候需要隐藏一些元素(div/ul li),某些时候又需要显示一些隐藏的元素.例如一打开网页显示一段网站公告,过一小段时间后把公告隐藏起来.对于这类元素显示隐藏的操作,应该如何实 ...

前端div的隐藏与展示控制

前端div的隐藏与展示控制相关推荐

最新文章

热门文章