首页 > 代码库 > 控制页面元素的显示和隐藏
控制页面元素的显示和隐藏
CreateTime--2017年7月13日07:30:55
Author:Marydon
js控制页面元素的显示和隐藏&<c:if></c:if>标签控制页面元素的显示和隐藏
说明：本文的重点在使用后者实现
实例：
医嘱类型分为：长嘱，临嘱，中医三种，页面默认只显示长嘱信息，点击临嘱或中医显示对应信息；选中变色。
CSS部分：
/* 医嘱：长嘱，临嘱，中医样式显示 Start*/.yz_td1 { line-height: 28px; height: 28px; padding-left: 10px; width: 100px;}/*灰色背景色*/.yz_td2 { font-size: 14px; height: 28px; line-height: 28px; width: 100px; color: #333; margin: 4px; background: #e7e9e6; border-radius: 6px; text-align: center;}/*绿色背景色*/.yz_td3 { font-size: 14px; height: 28px; line-height: 28px; width: 100px; color: #fff; margin: 4px; background: #42b012; border-radius: 6px; text-align: center;}/* End 医嘱：长嘱，临嘱，中医嘱样式显示*/
共用js
var consEval = new ConsEval();function ConsEval() { /** * 控制医嘱类型显示内容 */ this.ctrlYzTitle = function (type,senderId) { // 更改class样式：选中变色 switch (senderId) { case ‘yzOption1‘: $get(‘yzOption1‘).className = ‘yz_td3‘; $get(‘yzOption2‘).className = ‘yz_td2‘; $get(‘yzOption3‘).className = ‘yz_td2‘; break; case ‘yzOption2‘: $get(‘yzOption2‘).className = ‘yz_td3‘; $get(‘yzOption1‘).className = ‘yz_td2‘; $get(‘yzOption3‘).className = ‘yz_td2‘; break; case ‘yzOption3‘: $get(‘yzOption3‘).className = ‘yz_td3‘; $get(‘yzOption1‘).className = ‘yz_td2‘; $get(‘yzOption2‘).className = ‘yz_td2‘; break; default: break; } // 获取医嘱tr数据 var yzTrs = $(‘#yzDiv tr:gt(0)‘); $(yzTrs).each(function() { var yzType = $(this).attr(‘yzType‘); // 相等显示，否则隐藏 if (type == yzType) { $(this).show(); } else { $(this).hide(); } }); }}
方式一：使用JAVASCRIPT实现
HTML部分
<table cellspacing="0" cellpadding="1" border="0" class="medical_table" width="100%" height="100%"> <tbody> <tr> <td class="yz_td1">查看医嘱</td> <td width="100"> <div class="yz_td3" onclick="consEval.ctrlYzTitle(‘长嘱‘,‘yzOption1‘);" id="yzOption1">长嘱</div> </td> <td width="100"> <div class="yz_td2" onclick="consEval.ctrlYzTitle(‘临嘱‘,‘yzOption2‘);" id="yzOption2">临嘱</div> </td> <td width="100"> <div class="yz_td2" onclick="consEval.ctrlYzTitle(‘中医‘,‘yzOption3‘);" id="yzOption3">中医</div> </td> <td></td><!-- 空td不要删除 --> </tr> <tr> <td valign="top" colspan="5"> <div class="Container" id="yzDiv"> <table class="my_table" border="0" cellpadding="1" cellspacing="0" align="center" id="yzTable"> <tr> <td style="background-color: #F8F9FA;">医嘱类型</td> <td style="background-color: #F8F9FA;">开始时间</td> <td style="background-color: #F8F9FA;">结束时间</td> <td style="background-color: #F8F9FA;">饮片处方</td> </tr> <c:forEach var="table" items="${model.DADVICELIST}" varStatus="s"> <tr yzType="${table.TYPE }"> <td>${table.TYPE }</td> <td>${table.START_TIME }</td> <td>${table.END_TIME }</td> <td align="left"> ${table.CONTENT } <div style="display:inline-block;text-align:right;min-width:100px;padding-right:50px;float:right;color:#0000ff;"> ${table.USAGENAME } ${table.HZ } ${table.DOSE } </div> </td> </tr> </c:forEach> </table> </div> </td> </tr> </tbody></table>
JAVASCRIPT部分
/** * 页面加载完毕，默认选中长嘱，只显示长嘱信息 */ window.onload = function() { if ($(‘#yzDiv tr‘).length > 1) { // 获取医嘱tr数据 var yzTrs = $(‘#yzDiv tr:gt(0)‘); $(yzTrs).each(function(index) { var yzType = $(this).attr(‘yzType‘); if (‘长期‘ == yzType) { $(this).show(); } else { $(this).hide(); } }); // 显示长嘱信息 consEval.ctrlYzTitle(‘长嘱‘,‘yzOption1‘); } else { // 隐藏 $(‘#yzOption1‘).parent().hide(); $(‘#yzOption2‘).parent().hide(); $(‘#yzOption3‘).parent().hide(); $(‘#yzDiv‘).parent().attr(‘colspan‘,2); }}
方式二：使用<c:if></c:if>标签实现
HTML部分
<table cellspacing="0" cellpadding="1" border="0" class="medical_table" width="100%" height="100%"> <tbody> <tr> <td class="yz_td1" id="yzTitle">查看医嘱</td> <c:if test="${!empty model.DADVICELIST}"> <td width="100"> <div class="yz_td3" onclick="consEval.ctrlYzTitle(‘长嘱‘,‘yzOption1‘);" id="yzOption1">长嘱</div> </td> <td width="100"> <div class="yz_td2" onclick="consEval.ctrlYzTitle(‘临嘱‘,‘yzOption2‘);" id="yzOption2">临嘱</div> </td> <td width="100"> <div class="yz_td2" onclick="consEval.ctrlYzTitle(‘中医‘,‘yzOption3‘);" id="yzOption3">中医</div> </td> </c:if> <td></td><!-- 空td不要删除 --> </tr> <tr> <td valign="top" <c:if test="${!empty model.DADVICELIST}">colspan="5"</c:if><c:if test="${empty model.DADVICELIST}">colspan="2"</c:if>> <div class="Container" id="yzDiv"> <table class="my_table" border="0" cellpadding="1" cellspacing="0" align="center" id="yzTable"> <tr> <td style="background-color: #F8F9FA;">医嘱类型</td> <td style="background-color: #F8F9FA;">开始时间</td> <td style="background-color: #F8F9FA;">结束时间</td> <td style="background-color: #F8F9FA;">饮片处方</td> </tr> <c:forEach var="table" items="${model.DADVICELIST}" varStatus="s"> <tr yzType="${table.TYPE }" <c:if test="${table.TYPE != ‘长期‘}">style="display:none;"</c:if>> <td>${table.TYPE }</td> <td>${table.START_TIME }</td> <td>${table.END_TIME }</td> <td align="left"> ${table.CONTENT } <div style="display:inline-block;text-align:right;min-width:100px;padding-right:50px;float:right;color:#0000ff;"> ${table.USAGENAME } ${table.HZ } ${table.DOSE } </div> </td> </tr> </c:forEach> </table> </div> </td> </tr> </tbody></table>
JAVASCRIPT部分
见共用js
实现效果：
总结：
能够利用加载页面时使用<c:if></c:if>标签来实现元素显示和隐藏的，推荐使用c标签来实现。
控制页面元素的显示和隐藏
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。