红色部分

                              $("#jstree_demo")

                               .jstree({                                 

                                   "core" : {

                                       "animation" : 0,

                                       "check_callback" : true,

                                       'force_text' : true,

                                       "themes" : { "stripes" : true },

                               // so that create works

                                   "check_callback" : true,

                                   'data' : function (obj, callback) {

                                                var jsonstr="[]";

                                                var jsonarray = eval('('+jsonstr+')');

                                                $.ajax({

                                                    type: "POST",

                                                    url:url,

                                                    dataType:"json",

                                                    async: false,

                                                    success:function(result) {

                                                        var arrays= result;

                                                        for(var i=0 ; i<arrays.length; i++){

                                                         console.log(Object.getOwnPropertyNames(arrays[i]).sort());

                                                            var arr = {

                                                                    "id":arrays[i].id,

                                                                    "parent":arrays[i].pid==""?"#":arrays[i].pid,

                                                                    "text":arrays[i].name,

                                                                    "type":arrays[i].iconSkin,

                                                                    "state": {"opened" : true}

                                                                    //"state": {"selected":true}

                                                            }

                                                            jsonarray.push(arr);

                                                        }

                                                    }

                                                });

                                                callback.call(this, jsonarray);

                                            }

                                        },

                                        "plugins" : [ "search", "state", "types", "wholerow","checkbox" ]

                                    });

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

解决火狐浏览隐藏不了滚动条问题

1.里层容器的width多17px，外层容器溢出隐藏，能兼容各个浏览器

2.设置 scrollbar-width: none，可兼容

html如下

一、将 DataTable 设置成中文

<script> $('#datatable').DataTable({

   language: { "sProcessing": "处理中...", "sLengthMenu": "显示 _MENU_ 项结果", "sZeroRecords": "没有匹配结果", "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项", "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" }
   }
});
}); </script>

二、设置列宽度

<script>
$('#datatable').DataTable({

"columnDefs": [
  {
    render: function (data, type, full, meta) {
        return "<div style='white-space:nowrap;float:right'>" + data + "</div>";
    },
    targets: [2,3,4,5,6]
  },
],

});

</script>

三、修改表格数据后，静态刷新表格数据不跳转

dataTable.ajax.reload(null, false);

// 重载所有接口数据，返回到第一页
dataTable.ajax.reload();

相关 API

ajax.reload( callback, resetPaging )

里面有二个参数：
callback ：当服务器返回数据并重绘完毕时执行此回调方法，回调方法返回的是服务器返回的数据
resetPaging： 重置（默认或者设置为true）或者保持分页信息（设置为false） 

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

1.目的

用漂亮的前端表格直观显示数据

2. JqueryTable简介

JqueryTable官网

表格显示

3.用法

1.初始化html页面

设置一个table

    


        


            


            

        

        


            

                <table id="table_id" class="display">
            

        

    

    


        


            


            

        

        


            

                <thead>
            

        

    

    


        


            


            

        

        


            

                <tr>
            

        

    

    


        


            


            

        

        


            

                <th>Column 1</th>
            

        

    

    


        


            


            

        

        


            

                <th>Column 2</th>
            

        

    

    


        


            


            

        

        


            

                </tr>
            

        

    

    


        


            


            

        

        


            

                </thead>
            

        

    

    


        


            


            

        

        


            

                <tbody>
            

        

    

    


        


            


            

        

        


            

                <tr>
            

        

    

    


        


            


            

        

        


            

                <td>Row 1 Data 1</td>
            

        

    

    


        


            


            

        

        


            

                <td>Row 1 Data 2</td>
            

        

    

    


        


            


            

        

        


            

                </tr>
            

        

    

    


        


            


            

        

        


            

                <tr>
            

        

    

    


        


            


            

        

        


            

                <td>Row 2 Data 1</td>
            

        

    

    


        


            


            

        

        


            

                <td>Row 2 Data 2</td>
            

        

    

    


        


            


            

        

        


            

                </tr>
            

        

    

    


        


            


            

        

        


            

                </tbody>
            

        

    

    


        


            


            

        

        


            

                </table>
            

        

    

2.引入静态资源

这个是JqueryTable必要的静态资源

    


        


            


            

        

        


            

                <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
            

        

    

如果你使用了js， 那么还需要引入jquery.js

3.初始化表格

    


        


            


            

        

        


            

                $(document).ready( function () {
            

        

    

    


        


            


            

        

        


            

                $('#table_id').DataTable();
            

        

    

    


        


            


            

        

        


            

                } );
            

        

    

3.实例

1. html页面

    


        


            


            

        

        


            

                <table id="tbl_grantedCoach" class="table table-striped table-bordered nowrap" style="table-layout:fixed; text-align: center;">
            

        

    

    


        


            


            

        

        


            

                <thead>
            

        

    

    


        


            


            

        

        


            

                <tr>
            

        

    

    


        


            


            

        

        


            

                <th width="10%">用户名</th>
            

        

    

    


        


            


            

        

        


            

                <th width="10%">姓名</th>
            

        

    

    


        


            


            

        

        


            

                <th width="8%">性别</th>
            

        

    

    


        


            


            

        

        


            

                <th width="10%">手机号</th>
            

        

    

    


        


            


            

        

        


            

                <th width="5%">工作年限</th>
            

        

    

    


        


            


            

        

        


            

                <th width="12%">教员类型</th>
            

        

    

    


        


            


            

        

        


            

                <th width="15%">角色</th>
            

        

    

    


        


            


            

        

        


            

                <th width="10%">备注</th>
            

        

    

    


        


            


            

        

        


            

                <th width="12%">操作</th>
            

        

    

    


        


            


            

        

        


            

                </tr>
            

        

    

    


        


            


            

        

        


            

                </thead>
            

        

    

    


        


            


            

        

        


            

                </table>
            

        

    

2.js代码

ajax 发送请求， 接受表格数据，再填写进去

    


        


            


            

        

        


            

                initGrantedCoachGrid:function(){
            

        

    

    


        


            


            

        

        


            

                selectedUserId =[];
            

        

    

    


        


            


            

        

        


            

                if(grantedCoachGrid){
            

        

    

    


        


            


            

        

        


            

                grantedCoachGrid.ajax.url(
            

        

    

    


        


            


            

        

        


            

                "course/getGrantedCoachByFolder?json&folderId="
            

        

    

    


        


            


            

        

        


            

                + selectNodeId + "").load();
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                grantedCoachGrid = $('#tbl_grantedCoach')
            

        

    

    


        


            


            

        

        


            

                .DataTable(
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                "lengthMenu" : [ [ 10, 20, 30 ],
            

        

    

    


        


            


            

        

        


            

                [ 10, 20, 30 ] // change per page
            

        

    

    


        


            


            

        

        


            

                // values here
            

        

    

    


        


            


            

        

        


            

                ],
            

        

    

    


        


            


            

        

        


            

                "ordering":false,
            

        

    

    


        


            


            

        

        


            

                "retrieve":true ,
            

        

    

    


        


            


            

        

        


            

                "bDestory" :true,
            

        

    

    


        


            


            

        

        


            

                "pageLength": 10,
            

        

    

    


        


            


            

        

        


            

                "bAutoWidth" : false,
            

        

    

    


        


            


            

        

        


            

                "ajax" : {
            

        

    

    


        


            


            

        

        


            

                "url" : "course/getGrantedCoachByFolder?json&folderId="
            

        

    

    


        


            


            

        

        


            

                + selectNodeId + "",
            

        

    

    


        


            


            

        

        


            

                "type" : "get",
            

        

    

    


        


            


            

        

        


            

                "cache" : false,
            

        

    

    


        


            


            

        

        


            

                "contentType" : "application/json; charset=utf-8",
            

        

    

    


        


            


            

        

        


            

                "dataSrc" : ""
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                "rowCallback" : function(row, data) {
            

        

    

    


        


            


            

        

        


            

                selectedUserId.push(data.userId);
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                "aoColumnDefs" : [ {
            

        

    

    


        


            


            

        

        


            

                sDefaultContent : '',
            

        

    

    


        


            


            

        

        


            

                aTargets : [ '_all' ]
            

        

    

    


        


            


            

        

        


            

                } ],
            

        

    

    


        


            


            

        

        


            

                // 填入列数据
            

        

    

    


        


            


            

        

        


            

                "columns" : [
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                "data" : "loginName"
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                "data" : "userFullName"
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                "data" : "gender",
            

        

    

    


        


            


            

        

        


            

                "mRender" : function(data,
            

        

    

    


        


            


            

        

        


            

                type, full) {
            

        

    

    


        


            


            

        

        


            

                if (data == "M") {
            

        

    

    


        


            


            

        

        


            

                return "男";
            

        

    

    


        


            


            

        

        


            

                } else if (data == "F") {
            

        

    

    


        


            


            

        

        


            

                return "女";
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                "data" : "mobilePhone"
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                "data" : "workYear"
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                { "data": "coachType" , "mRender":function(data,type,full){
            

        

    

    


        


            


            

        

        


            

                if(data=="0")
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                data="理论培训";
            

        

    

    


        


            


            

        

        


            

                }else if(data=="1"){
            

        

    

    


        


            


            

        

        


            

                data="实习培训";
            

        

    

    


        


            


            

        

        


            

                }else{
            

        

    

    


        


            


            

        

        


            

                data="理论培训+实习培训";
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                return data;
            

        

    

    


        


            


            

        

        


            

                }},
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                "data" :function( row, type, val, meta ){
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                return row.userRoles[0].roleName;
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                "data" : "remark"
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                "data" : null,
            

        

    

    


        


            


            

        

        


            

                "mRender" : function(data,
            

        

    

    


        


            


            

        

        


            

                type, full) {
            

        

    

    


        


            


            

        

        


            

                return "";
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                ],
            

        

    

    


        


            


            

        

        


            

                "oLanguage" : {
            

        

    

    


        


            


            

        

        


            

                "sProcessing" : "正在加载中......",
            

        

    

    


        


            


            

        

        


            

                "sLengthMenu" : "每页显示_MENU_条记录",
            

        

    

    


        


            


            

        

        


            

                "sZeroRecords" : "对不起，查询不到相关数据！",
            

        

    

    


        


            


            

        

        


            

                "sEmptyTable" : "无数据存在！",
            

        

    

    


        


            


            

        

        


            

                "sInfo" : "当前显示_START_到_END_条，共_TOTAL_条记录",
            

        

    

    


        


            


            

        

        


            

                "sInfoFiltered" : "数据表中共为 _MAX_ 条记录",
            

        

    

    


        


            


            

        

        


            

                "sSearch" : "",
            

        

    

    


        


            


            

        

        


            

                "oPaginate" : {
            

        

    

    


        


            


            

        

        


            

                "sFirst" : "首页",
            

        

    

    


        


            


            

        

        


            

                "sPrevious" : "上一页",
            

        

    

    


        


            


            

        

        


            

                "sNext" : "下一页",
            

        

    

    


        


            


            

        

        


            

                "sLast" : "末页"
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }, // 多语言配置
            

        

    

    


        


            


            

        

        


            

                "stateSave" : true
            

        

    

    


        


            


            

        

        


            

                // save the state of a table
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    




     
    

        蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
    

    

         
    

    

        


    

    

        分享此文一切功德，皆悉回向给文章原作者及众读者.
    

    

        免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
    

    

        蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
    

获取元素的属性分为两种类型：

1-获取元素常见的属性（class,id,type,value…）

2-获取自定义的元素的属性（data-value,data-mess…）

获取元素的属性，设置元素的属性：

1-原生JS

 设置属性 .setAttribute("属性","值") 获取属性 .getAttribute("属性") 


    

        1
    

    

        2
    

2-jquery

 设置属性 .attr("属性","值") 获取属性 .attr("属性") 


    

        1
    

    

        2
    

下面通过一个例子介绍一下，如何获取和设置元素的属性；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>获取元素属性</title> <style> * { margin:0; padding:0; list-style:none; } </style> </head> <body> <div id="mayouchen"> <div style="background:red;height:20px">元素属性获取</div> <div class="test1"> <p id="demo">点击按钮来设置按钮的 type,id,class 属性。</p> <input value="OK" class="mayouchen"> <button onclick="mayouchen1()">获取元素属性</button> </div> <div style="background:green;height:20px">自定义属性获取</div> <div class="test2"> <div id="tree" data-leaves="47" data-plant-height="2.4m">我是被获取的元素</div> <button onclick="mayouchen2()">获取自定义元素属性</button> </div> </div> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { }); function mayouchen1() { document.getElementsByTagName("INPUT")[0].setAttribute("type", "button"); document.getElementsByTagName("INPUT")[0].setAttribute("class", "mayouchen"); document.getElementsByTagName("INPUT")[0].setAttribute("id", "test1"); document.getElementsByTagName("INPUT")[0].getAttribute("id"); document.getElementsByTagName("INPUT")[0].getAttribute("class"); console.log("id=====" + document.getElementsByTagName("INPUT")[0].getAttribute("id")); console.log("class=====" + document.getElementsByTagName("INPUT")[0].getAttribute("class")); } function mayouchen2() { var tree = document.getElementById("tree"); //getAttribute()取值属性 console.log("data-leaves======" + tree.getAttribute("data-leaves")); console.log("data-plant-height===============" + tree.getAttribute("data-plant-height")); //setAttribute()赋值属性 tree.setAttribute("data-come", "49"); //data-前缀属性可以在JS中通过dataset取值，更加方便 console.log("通过dataset获得data-leaves====" + tree.dataset.leaves); console.log("通过dataset获得data-plant-height====" + tree.dataset.plantHeight); //注意在这里连字符的访问时，属性要写成驼峰形式 } </script> </body> </html> 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

    

        60
    

    

        61
    

    

        62
    

    

        63
    

    

        64
    

    

        65
    

    

        66
    

上面有两个test, test1是测试元素常见属性，test2是测试元素自定义属性

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

转自：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

网页使用iframe嵌入网页时，有时候需要动态处理src的值，而不是写死的，所以我们需要知道如何给iframe src赋值，通常是使用js或jquery来实现。本文介绍js和jquery给iframe src赋值的3种方法。

方法一

这是最常用的js给iframe src赋值的方法，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iframe src赋值的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <iframe frameborder="1" id="barframe" ></iframe> </body> </html> <script type="text/javascript"> document.getElementById("barframe").src = "http://localhost/EXAMPLE/iframe/example.html"; </script>

 

方法二

通过js创建一个iframe元素，然后再给该元素src赋值，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iframe src赋值的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> </body> </html> <script type="text/javascript"> var myIframe = document.createElement('iframe');
myIframe.src = 'http://localhost/EXAMPLE/iframe/example.html';
document.body.appendChild(myIframe); </script>

 

最后一句 document.body.appendChild(myIframe); 是表示在 body 里添加刚定义的 myIframe 这个控件。

我们也可以把该iframe添加到某一个div容器里，写法如下：document.getElementById("div1").appendChild(myIframe); ， div1是该div容器的id 。

方法三

上面两个方法都是用js来实现的，其实我们也可以用jquery来实现，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iframe src赋值的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://www.webkaka.com/script/jquery-1.4.2.min.js" type="text/javascript"></script> <script> $(document).ready(function() {
  $('#barframe').attr('src', 'http://localhost/EXAMPLE/iframe/example.html');
}); </script> </head> <body> <iframe frameborder="1" id="barframe"></iframe> </body> </html>

特别注意，上述jquery代码不能缺少 $(document).ready(); ，否则iframe src赋值失败，除非把jquery的代码放在 <iframe ... 的html代码后面。此外，还需要在 <head></head> 里引用 jquery.js 文件

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

转自：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

<script type="text/javascript">
function delElement(obj){
  obj.parentNode.removeChild(obj);
}
</script>
<ul>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
</ul>

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

转自：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

Ⅰ、问题描述：

1、用JavaScript + html + css 实现，选项卡操作；
2、分析：
A、用 html + css 实现布局(盒子的布置，空间的分配等)；
B、用 JavaScript 中的 DOM 操作，实现点击不同选项显示不同标题栏的功能；

Ⅱ、实现过程如下：

1、运行软件VScode，亲测可实现；
2、运行代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; font-family: '微软雅黑'; font-size: 14px; } #container { width: 398px; margin: 100px auto; } #container a { display: block; width: 98px; height: 42px; line-height: 42px; text-align: center; float: left; border-top: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; color: #333333; text-decoration: none; } #container a:hover { /* 鼠标放在 a 的标签上，其文字将显示为：红色； */ color: #ff4400; } .content { width: 355px; height: 140px; text-align: center; border-right: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; padding: 30px 0 0 40px; display: none; } .clear { clear: left; } #container a.on { /* 对a标签中的类名为：on 的标签进行操作； */ background: #ff4400; color: #fff; } </style> </head> <body> <div id="container"> <a href="#" class="on" >充话费</a> <!-- 类为：on 的 a 标签； --> <a href="#" >充流量</a> <a href="#" >充固话</a> <a href="#" style="border-right: 1px solid #ff4400;">充宽带</a> <!-- style 操作目的：使得显示的盒子最右边有边框； --> <div class="clear"></div> <div class="content" style="display: block;"> <!-- style 操作目的：使第一个图片在初始状态时，能显示出来； --> <img src="images/1.png" width="355px"/> <!-- 该位置存放的是：图片的地址 (即：里面加载的是图片信息) --> </div> <div class="content"> <img src="images/2.png" width="355px" /> <!-- 该位置存放的是：图片的地址 (即：里面加载的是图片信息) --> </div> <div class="content"> <img src="images/3.png" width="355px" /> <!-- 该位置存放的是：图片的地址 (即：里面加载的是图片信息) --> </div> <div class="content"> <img src="images/4.png" width="355px" /> <!-- 该位置存放的是：图片的地址 (即：里面加载的是图片信息) --> </div> </div> <script> var as = document.getElementsByTagName('a'); //通过 DOM 操作，拿到标签为 a 的所有的元素(是个集合)； var divs = document.getElementsByClassName('content');//通过 DOM 操作，拿到类为 content 的所有的元素(是个集合)； for(var i=0; i<as.length; i++) { as[i].index = i; //给拿到的每个元素对象添加索引属性； (由于通过 DOM 操作拿到的元素是对象，因此可以添加属性值)； as[i].onclick = function() { //给 as集合 绑定单击事件； for(var j=0; j<as.length; j++) { as[j].className = ''; //将 as集合 的所有元素的类名全部取消； (此时用的思想为：排他思想；) divs[j].style.display = 'none'; //将 divs集合 的所有元素全设置成不显示状态； } this.className = 'on'; //仅将被单击的元素的类名设置为：on，以便执行在 css 中的相关操作； divs[this.index].style.display = 'block'; //并将被单击的元素的相关图片设置为：block状态；(即：显示出来；) } } </script> </body> </html> 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

    

        60
    

    

        61
    

    

        62
    

    

        63
    

    

        64
    

    

        65
    

    

        66
    

    

        67
    

    

        68
    

    

        69
    

    

        70
    

    

        71
    

    

        72
    

    

        73
    

    

        74
    

    

        75
    

    

        76
    

    

        77
    

    

        78
    

    

        79
    

    

        80
    

    

        81
    

    

        82
    

    

        83
    

    

        84
    

    

        85
    

    

        86
    

    

        87
    

    

        88
    

    

        89
    

    

        90
    

    

        91
    

    

        92
    

    

        93
    

    

        94
    

    

        95
    

    

        96
    

    

        97
    

    

        98
    

    

        99
    

    

        100
    

    

        101
    

    

        102
    

    

        103
    

    

        104
    

3、结果展示：
A、默认的显示结果：

B、点击 ‘充流量’ 后的显示结果：

C、点击 ‘充固话’ 后的显示结果：

D、点击 ‘充宽带’ 后的显示结果：

4、可能存在的问题：
A 、如果自己也加载了图片信息，仍然不能显示该结果，可以直接下载我传上去的文档(可能解释的更详细)，可以直接在 VScode 等其他软件上加载运行；

地址为：

https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501

Ⅲ、小结：

哪里有不对或不合适的地方，还请大佬们多多指点和交流！


https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

转自：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

记录关于通过v-if渲染的element-ui表单，校验规则不生效的问题

代码

 <el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="标题1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item label="标题2" prop="requestData"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form> 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

原因：
因为form-item绑定验证事件是在mounted中进行的，规则变化后没有进行重新绑定验证事件，v-if渲染组件节点diff后被复用了，所以验证也就自然失效了

参考回答：v-if案例解析（element-ui form-item 结合 v-if 动态生成rule规则\表单元素，表单无法验证问题剖析 ）
感兴趣的小伙伴可以学习一下

解决方案：

1. 给每一个el-form-item添加一个key属性区分

 <el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="标题1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item key="1" label="标题2" prop="requestData"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form> 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

如果v-if渲染的目标是整个表单，则在form标签写入key

2. 直接在el-form-item中写rules

 <el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="标题1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item label="标题2" prop="requestData" :rules="{ required: true, message: 'xxx不能为空', trigger: 'blur' }"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form> 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

:rules="{ required: true, message: ‘xxx不能为空’, trigger: ‘blur’ }"

这里需要注意JavaScript中的单引号''与双引号""的使用规范

还有很多方法可以解决这个问题，这里只记录我用过的其中两个方法。有其他解决方法的同学欢迎留言讨论！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

转自：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务