页面隐藏

最新推荐文章于 2024-06-01 12:09:20 发布

jc_dreaming2

最新推荐文章于 2024-06-01 12:09:20 发布

阅读量106

点赞数

分类专栏： JS 文章标签： JSP

本文链接：https://blog.csdn.net/jc_dreaming2/article/details/83631594

版权

JS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

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";//隐藏 
		}