原生DIV,控制两个DIV显示隐藏切换,且切换后样式形状不乱

功能:做项目时候经常需要设置两个DIV显示或者隐藏,切换显示,并且保证之前设置的样式不乱:

实现:

保证样式不乱的方法是:先进行有关数据渲染的操作,最后再执行隐藏和显示的操作,这样数据已经填充好了,样式就不会乱了。

一.方式1:隐藏后仍占有页面空间,显示空白

div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白

style="visibility: none;"
document.getElementById("typediv1").style.visibility="hidden";//隐藏
document.getElementById("typediv1").style.visibility="visible";//显示

二.方式2:隐藏后释放占用的页面空间,不占空间,没有空白

通过设置display属性可以使div隐藏后释放占用的页面空间,如下

style="display: none;"
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示

Jquery方式

1、$("#demo").attr("style","display:none;");//隐藏div

$("#demo").attr("style","display:block;");//显示div

2、$("#demo").css("display","none");//隐藏div

$("#demo").css("display","block");//显示div

3、$("#demo").hide();//隐藏div

$("#demo").show();//显示div
---------------------

原文地址:https://www.cnblogs.com/rzqy/p/10917320.html

时间: 2024-10-16 00:56:24

原生DIV,控制两个DIV显示隐藏切换,且切换后样式形状不乱的相关文章

JQuery控制两个Div高度一致

<script type="text/javascript"> $(function(){ if($("#left").height() > $("#right").height()){ $("#right").css("height",$("#left").height()); }else{ $("#left").css("height&

jquery css div (弹出)显示隐藏层

css代码段 .crm_tc_bg { width: 100%; height: 100%; position: fixed; display: block; top: 0; left: 0; background: #000; filter: apha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; z-index: 1000; } .crm_tc_box { width: 300px; min-height: 200px; max-height:

div+css:两个div并排等高 (table-cell)

两个div并排等高 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .left, 8 .right { 9 display: table-cell; 10 border: 1px solid #f40; 11 } 12 </style> 13 </hea

点击按钮显示隐藏层 和 切换按钮同时显示多个隐藏层

按钮点击显示隐藏层(再次点击按钮则隐藏层关闭): HTML部分: <button type="button" id="show" onclick="showHidden()">点我显示隐藏层</button> <div id="hidden" style="display:none">我是隐藏层.</div> JS部分: <script type='te

Android项目:输入法软键盘显示/隐藏的监听和控制,InputMethodManager用法研究

在项目开发中,用到编辑框的地方经常涉及到要监听或者控制软键盘的显示/隐藏状态.本以为这是很容易解决的一个小问题,没想到当初碰到这个问题才明白还得花点小心思才能整好.现将针对软键盘的显示/隐藏状态的监听/监控方法做一些总结,以备后用. 一.点击空白处隐藏软键盘 这是具有编辑框焦点的页面对输入法软键盘状态监听的一般需求和解决方法. 首先获得InputMethodManager:        InputMethodManager manager = (InputMethodManager) getS

jQuery实现复选框的全选、反选、并且根据复选框的&lt;checked属性&gt;控制多个对应div的显示/隐藏

<!doctype html><html> <head> <meta charset="utf-8"> <title>jQuery实现复选框的全选.反选.并且根据复选框的(checked属性)控制多个对应div的显示/隐藏</title> <script type="text/javascript" src="jquery-1.11.3.min.js"></

React 点击按钮显示div与隐藏div,并给div传children

最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {render} from 'react-dom'; export default class FilterButton extends Component{ constructor(props){ super(props); this.state = { clickProps:{ display: 'n

两个DIV并排显示

今天做的一个项目,需要做3个div,一个是总框(Div1),另外两个是子框,按比例填满div1,我设置好两个div的width和height,发现效果是两个子div上下显示,如图所示: 要想将两个DIV并排显示,需要用到float属性,将div2的float设置为left,将div3的float设置为right,运行就达到了想要的效果 值得一提的是,如果div2和div3的width值相加等于DIV1的width值得话,div2和div3依旧是上下排布而非并列排布 代码示例如下: <%@ pag

点击页面其它地方隐藏该div的两种思路

第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div. $(document).bind('click',function(){ $('#test').css('display','none'); }); $('#test').bind('click',function(e){ stopPropagati