zoukankan      html  css  js  c++  java
  • js实现隐藏和显示html

    通常,我们的目的是在点击一个按钮时触发显示样式的不同;

    1. 首先清楚我们需要默认展示的样式,其次需要找到点击某个按钮后需要展示的样式;

      对于默认展示的样式:我们需要设置style="display:block" 

      

      <div class="col-sm-6 deleteType-item" style="display: block">
                        <label class="col-sm-4 control-label"></label>
                        <button class="btn btn-primary" onclick="deleteCourse()">删除课程</button>
                    </div>
                    <div class="col-sm-6 addType-item" style="display: none">
                        <label class="col-sm-4 control-label"></label>
                        <button class="btn btn-primary" onclick="addCourse()">增加课程</button>
                    </div>
    

      

      对于需要隐藏的样式:需要设置style="display:none"

      并对不同的类型设置不同的class标签,比如删除课程设置的是deleteType-item, 增加课程设置的是addType-item

    2. 其次需要在不同的条件下展示不同的样式,以下面的实现为例,我们需要在select框发生变化的时候,来确定到底是删课还是加课,onchange="permissionChange()"方法正是帮助我们来改变样式的;

     <div class="col-sm-4">
                            <select class="form-control" id="permissionType" onchange="permissionChange()"> 
                                <option value="delete">删课</option>
                                <option value="add">加课</option>
                            </select>
                        </div>
    

    3. 通过js代码控制显示的html, 我们获取到select框的id, 并获取到对应的value, 根据1中的className 获取到对应的节点。然后遍历每种节点的list, 进行修改

    function permissionChange() {
        var perObj = document.getElementById('permissionType');
        var perOption = perObj.options[perObj.selectedIndex] || null;
        var addItems = document.getElementsByClassName('addType-item');
        var deleteItems = document.getElementsByClassName('deleteType-item');
        if (perOption.value === 'delete') {
            for (var i = 0; i < deleteItems.length; i++) {
                deleteItems[i].style.display = 'block';
            }
            for (var i = 0; i < addItems.length; i++) {
                addItems[i].style.display = 'none';
            }
    
        } else {
            for (var i = 0; i < deleteItems.length; i++) {
                deleteItems[i].style.display = 'none';
            }
            for (var i = 0; i < addItems.length; i++) {
                addItems[i].style.display = 'block';
            }
        }
    
    }
    

      

  • 相关阅读:
    jdk1.8 LongAdder源码学习
    linux 下 vi 文本编辑如何复制一行粘贴删除一行数据
    远程调试
    本机与远程主机指定端口的网络是否连通
    自定义弹窗
    Windows查看占用端口的进程及其对应的应用程序并关闭之
    超实惠:99元阿里云服务器1核2G内存40G硬盘(SSD)
    Java显式锁学习总结之六:Condition源码分析
    Maven使用国内镜像
    深入理解读写锁—ReadWriteLock源码分析
  • 原文地址:https://www.cnblogs.com/leavescy/p/11239001.html
Copyright © 2011-2022 走看看