控制页面元素的显示和隐藏

最新推荐文章于 2023-01-20 10:30:00 发布
最新推荐文章于 2023-01-20 10:30:00 发布
阅读量118 收藏
点赞数
文章标签： 前端 javascript ViewUI
原文链接：http://www.cnblogs.com/Marydon20170307/p/7158549.html
版权
 

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;">
                                        &nbsp;&nbsp;&nbsp;&nbsp;${table.USAGENAME }
                                        &nbsp;&nbsp;${table.HZ }
                                        &nbsp;&nbsp;${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;">
                                        &nbsp;&nbsp;&nbsp;&nbsp;${table.USAGENAME }
                                        &nbsp;&nbsp;${table.HZ }
                                        &nbsp;&nbsp;${table.DOSE }
                                    </div>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

　　JAVASCRIPT部分

　　　　见共用js

实现效果：

　　 

总结：

　　能够利用加载页面时使用<c:if></c:if>标签来实现元素显示和隐藏的，推荐使用c标签来实现。　　 

 

 

转载于:https://www.cnblogs.com/Marydon20170307/p/7158549.html

weixin_30448685
关注
html元素隐藏js 控制,JS控制HTML元素的显示和隐藏的两种方法
weixin_35698059的博客
06-03 2038
JS控制HTML元素的显示和隐藏的两种方法利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。方法一：document.getElementById("EleId").style.visibility="hidden";document.getElementById("EleId").style.vis...
认识DOM
Jlinglinglei的专栏
02-01 365
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 HTML文档可以说由节点构成的集合，DOM节点有: 1. 元素节点：上图中、、等都是元素节点，即标签。 2. 文本节点:向用户展示的内容，如...中的JavaScript、DOM、CSS等文本。 3.
jsp ＜c:if＞ 标签 判断 隐藏按钮
qq_36636312的博客
09-17 5255
** 1，描述 ** <c:if>标签判断表达式的值，如果表达式的值为 true 则执行其主体内容。 ** 2，语法 ** <c:if test="<boolean>" var="<string>" scope="<string>"> ... </c:if> ** 3，应用： ** 我主要用来根据不同的用户隐藏系统部分功能，比如， 非admin用户，不能看到数据模型生成按钮，自然也不能操作该功能 代码： <c:if t
JavaScript控制元素（标签）的显示与隐藏
热门推荐
cnds123的专栏
12-24 2万+
JavaScript控制元素（标签）的显示与隐藏，有多种方式实现。
使用JavaScript控制HTML元素的显示和隐藏
日常学习总结
01-20 2174
使用JavaScript控制HTML元素显示和隐藏
javascript 控制 html元素 显示/隐藏实现代码
10-29
在当今的Web开发中，对HTML元素进行显示或隐藏的控制是一项基本而重要的任务。本文将详细介绍如何使用JavaScript来实现...开发者可以根据需要选择合适的方法来实现元素的隐藏和显示，从而提供更加动态的用户交互体验。
JS控制HTML元素的显示和隐藏的两种方法
10-21
在Web开发中，控制HTML元素的显示和隐藏是常用的操作，这可以通过...本文介绍了两种常见的控制HTML元素显示和隐藏的JS方法，并详细说明了它们的使用场景和效果差异。希望本文的内容能够为Web开发人员提供有价值的参考。
微信小程序中的滑动页面隐藏和显示组件功能的实现代码
10-15
在微信小程序中实现滑动页面隐藏和显示组件的功能，主要是为了提升用户体验，使页面元素在特定的滚动状态下自动隐藏或显示，以符合用户的使用习惯。例如，当页面滚动到一定高度时，导航栏或底部按钮等可以自动隐藏，...
jQuery控制元素隐藏和显示
10-20
本文介绍的是如何使用jQuery来控制网页元素的隐藏和显示，具体包括直接隐藏和显示元素、实现淡入淡出效果以及滑动效果。 1、jQuery隐藏和显示元素 jQuery提供了两种基本方法来控制元素的隐藏和显示：hide()方法和...
js 控制样式显示隐藏
看一看喽的博客
09-28 1万+
&lt;input id="challengeCode" name="challengeCode" type="text" class="login_box" style="display:none;width: 40%;" /&gt; 默然是隐藏的input /** *当style.display="block"或style.visibility="vi
Table控件通过设置display属性控制显示隐藏发现下面的tbody不能自动table的整个宽度
第一段代码的博客
07-28 1080
Table控件通过设置display属性控制显示隐藏发现下面的tbody不能自动table的整个宽度,会有一些宽度留余; 原因: 通过给Table控件的设置display的block属性后,table就获取不到完整的宽度了. 所以这个原因就是block属性导致. 解决思路: 要使 tbody 宽度正常，必须设置 display:table. 或者通过给给 table 包裹一层 div，然后设置该 div 的display 属性为 block 或 none的变通,这样 JavaScript 控制.
C#后台控制div进行隐藏与显示
qq_31584315的博客
04-26 2796
//xxxw.Disabled = false; xxxw.Style.Add("display", "none"); 需要在前台界面将元素转化为服务器控件
jQuery实现标签的隐藏和显示以及判断是否隐藏或显示
awangwu的博客
09-22 9273
.show()//显示匹配的元素 示例:$('xxx').show(); //显示标签   .hide()/隐藏匹配的元素 示例:$('xxx').hide(); //隐藏标签   //判断标签是隐藏状态还是显示状态 alert($("#id").is(':visible')); //判断是否显示 显示：true 隐藏：false if($("#id").is(':hidde...
用tbody解决div在table标签里无法隐藏某些行
zlreal的专栏
02-12 1153
显示     function   list(obj)     {         if(obj.checked)         {               document.getElementById(tab1).style.display=;      }         else      {               document.getElementById(ta
使用tbody标签控制显示与隐藏后，宽度发生变化问题。
fanyulei2010的专栏
04-28 1386
         在table中，使用tbody标签来控制多个tr行的显示与隐藏时，使用display：none，display：block开控制时，会发生tbody的宽度变为table的一半的情况。 原因：         当 table 的 display 为 block 时，不论是否在 HTML 里显式地写了 tbody 标签，Firefox 解析出的 tbody 都不再和 table...
jsp页面控制显示和隐藏
最新发布
06-02
你可以使用以下方式在 JSP 页面中控制元素的显示和隐藏： 1. 使用 JSTL 标签库中的 `<c:if>` 标签 ```jsp ${condition}"> <!-- 显示的内容 --> ``` 2. 使用 JavaScript 控制元素的显示和隐藏 ```jsp if ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值