`

页面隐藏

    博客分类:
  • JS
JSP 
阅读更多
div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白:
以下是引用片段:
  style="visibility: none;"
  document.getElementById("work").style.visibility="hidden";//隐藏
  document.getElementById("ask").style.visibility="visible";//显示

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

以下是引用片段:
  style="display: none;"
  document.getElementById("work").style.display="none";//隐藏
  document.getElementById("ask").style.display="";//显示


代码应用:如响应select下拉选择框显示隐藏页面
 
<td class="td1" width="10%"><font color="red" face="宋体">*</font>所属阶段:</td>
        <td width="10%"><select name="stageName" id="stageName" styleClass="input" style="width:100%" 
          onfocus="style.backgroundColor='#e0f4ff'" onblur="style.backgroundColor='#fff'" onchange="getList()">
        	<option value="0">--请选择--</option>
        	<c:forEach var="stageList" items="${stages}">
      		<option value="${stageList.dicId}">${stageList.dictValue}</option>
      		</c:forEach>
        </select></td>
<td   width="10%">
       <div id="work"  style="display: none;" >
       	   <select id="control_7" name="control_7[]" multiple="multiple" size="5">
					<option value="">--请选择--</option>
					<c:forEach var="users" items="${users}">
      				<option value="${users.userId}">${users.userName}</option>
      				</c:forEach>
		  </select>
       </div>
     
	   <div id="ask" style="display:;" >
	     <select id="control_6" name="control_6[]" multiple="multiple" size="5" >
					<option value="">--请选择--</option>
					<c:forEach var="asks" items="${asks}">
      				<option value="${asks.userId}">${asks.userName}</option>
      				</c:forEach>
				</select>
	   
	    </div>
		   
		</td>





function getList(){
		var selected = document.getElementById("stageName").value;
		if(selected = 271){
			  document.getElementById("ask").style.display="";//显示 
			  document.getElementById("work").style.display="none";//隐藏 
		}else{
			  document.getElementById("work").style.display="";//显示 
			  document.getElementById("ask").style.display="none";//隐藏 
		}



分享到:
评论

相关推荐

    微信小程序中的滑动页面隐藏和显示组件功能的实现代码

    在微信小程序中实现滑动页面隐藏和显示组件的功能,主要是为了提升用户体验,使页面元素在特定的滚动状态下自动隐藏或显示,以符合用户的使用习惯。例如,当页面滚动到一定高度时,导航栏或底部按钮等可以自动隐藏,...

    页面隐藏菜单栏

    在IT行业中,页面隐藏菜单栏是一个常见的需求,特别是在设计网页或移动应用时,为了提供更好的用户体验,有时需要根据用户操作或特定场景动态显示或隐藏菜单栏。本篇将围绕这个主题,结合“ben_app”这个压缩包中的...

    404页面中怎么隐藏后门

    打造404页面隐藏后门打造404页面隐藏后门打造404页面隐藏后门打造404页面隐藏后门打造404页面隐藏后门打造404页面隐藏后门打造404页面隐藏后门打造404页面隐藏后门打造404页面隐藏后门打造404页面隐藏后门打造404...

    在vue中实现某一些路由页面隐藏导航栏的功能操作

    本文将详细讲解如何在Vue中实现某些特定路由页面隐藏导航栏的功能。 首先,Vue Router是Vue.js官方提供的路由管理库,它允许我们轻松地管理和控制应用程序的路由。默认情况下,我们可以在`&lt;router-view&gt;`组件中放置...

    PDF页面锁(PDF隐藏页面工具)

    PDF页面锁是一款Windows平台下的PDF加密安全工具,它可以直接加密锁定或隐藏您所选择的PDF...当您需要解锁或解除页面隐藏时,只需要运行PDF页面锁并打开PDF文件,输入锁定时加密的密码然后选择解除全部锁定就可以了。

    timer-miniprogram:小程序定时器管理库,更合理地使用 setTimeout 和 setInterval,在页面显示时重启定时器,页面隐藏时暂停定时器,页面卸载时清除定时器

    小程序定时器管理库,更合理地使用 setTimeout 和 setInterval,在页面显示时重启定时器,页面隐藏时暂停定时器,页面卸载时清除定时器。 写这个库的缘由。 使用 可参考 example 目录下的示例项目或参照以下流程: ...

    vue3项目中跳转页面隐藏TabBar的方法

    vue3项目中跳转页面隐藏TabBar的方法

    AngularJS打开页面隐藏显示表达式用法示例

    本文实例讲述了AngularJS打开页面隐藏显示表达式用法。分享给大家供大家参考,具体如下: 1.使用 ng-cloak, 同时要在css加入一行 [ng-cloak] {display: none;} 样式 [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng...

    html 点击按钮 实现页面内容地的隐藏与切换

    根据给定的文件信息,本篇文章将详细解析如何利用HTML、CSS及JavaScript实现页面内容的隐藏与切换功能。本文将从HTML结构搭建、CSS样式设置以及JavaScript交互逻辑三个方面进行阐述。 ### HTML结构搭建 首先来看...

    webview 监听页面显示事件

    // 页面加载完成,可以在此处隐藏加载进度条,或者执行其他需要在页面完全显示后进行的操作 } }); ``` 此外,还可以利用`WebChromeClient`来监听页面的加载进度,例如: ```java webView.setWebChromeClient(new...

    点击元素以外的地方隐藏元素插件

    "点击元素以外的地方隐藏元素插件",即clickOutHide,是一个基于jQuery的插件,专门用于实现一种交互效果:当用户点击页面上除特定元素之外的任何地方时,该特定元素将自动隐藏。这个插件为开发者提供了一个灵活且...

    链接、页面跳转、隐藏、表单提交

    ### 链接、页面跳转、隐藏、表单提交 #### 一、链接与页面跳转 在Web开发中,链接与页面跳转是非常基础的功能之一,它们用于实现不同页面之间的导航。根据给定的部分内容,我们可以看到几种不同的实现方式。 1. *...

    js 实现 隐藏不想打印的页面内容

    js 实现 隐藏不想打印的页面内容! 值得下载看看!资源免费,大家分享!!

    WPF页面隐藏关闭按钮;实现倒计时功能; 设置进度条的背景色和圆角

    WPF页面(Auto_Delay),实现功能说明: (1):隐藏窗口的最大化、最小化、关闭按钮; (2):实现倒计时功能,包括:页面标题、倒计时剩余显示、进度条显示、停止按钮; (3):设置进度条的背景色和圆角

    android 闪屏 欢迎界面 隐藏底部虚拟按钮全屏 适配方案

    为了让这类界面更加美观且用户体验良好,开发者需要考虑全屏显示并隐藏底部的系统导航栏(虚拟按钮)。以下是一个详细的适配方案: 1. **全屏显示** - Android系统提供了多种方法实现全屏显示,如在`...

    Android动态显示隐藏底部导航栏

    在Android4.2.2中,导航栏(也就是屏幕底部的三个按钮,home,back,recentapp)是系统应用SystemUi.apk的一部分,简言之,我们的需求就是让我们的app来控制SystemUi.apk,达到动态显示隐藏屏幕底部导航栏的效果。...

    选项卡控件的显示隐藏功能

    "选项卡控件的显示隐藏功能"是LabVIEW中的一个高级特性,它允许开发人员根据需要动态地显示或隐藏选项卡,以提高用户的交互体验和程序的灵活性。 首先,理解LabVIEW中的选项卡控件:它由一系列子面板组成,每个子...

    JavaScript 动态隐藏、显示DIV 页面刷新后也不会改变隐藏状态

    使用JQUERY做的一个页面DIV动态隐藏 显示 点击+号图片后 DIV会自动隐藏 点击-号图片后 DIV会自动显示 隐藏的DIV区域内的控件值后台仍可以取得到,当页面刷新时,也不会改变隐藏区域的隐藏状态 使用JQUERY将页面状态...

Global site tag (gtag.js) - Google Analytics