菜单选项卡-2中方法加载选项卡的内容

html代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>菜单选项卡</title>
    <link rel="stylesheet" type="text/css" href="xd_menu.css">
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="xd_menu.js" type="text/javascript"></script>

    <script>
        $(function () {
            var menuData = [
                { id : 1,pid : null,n : '菜单名称1',url : '#'},
                { id : 2,pid : null,n : '菜单名称2',url : '#'},
                { id : 3,pid : null,n : '菜单名称3',url : '#'},
                { id : 4,pid : null,n : '菜单名称4',url : '#'},
                { id : 5,pid : null,n : '菜单名称5',url : '#'},
                { id : 6,pid :3,n : '菜单名称6',url : '#'},
                { id : 7,pid : 3,n : '菜单名称7',url : '#'},
                { id : 8,pid : 3,n : '菜单名称8',url : '#'},
                { id : 9,pid :3,n : '菜单名称9',url : '#'},
                { id : 10,pid :9,n : '菜单名称10',url : '#'},
                { id : 11,pid : 9,n : '菜单名称11',url : '#'},
                { id : 12,pid :9,n : '菜单名称12',url : '#'},
                { id : 13,pid :9,n : '菜单名称13',url : '#'},
                { id : 14,pid : 13,n : '菜单名称14',url : '#'},
                { id : 15,pid :1,n : '菜单名称15',url : '#'},

            ]
            $("#xd_dy_menu1").menu();
            $("#xd_dy_menu2").menu();
            $("#xd_dy_menu3").menu({
                type : 0,
                data : menuData
            });
        })
    </script>
</head>
<body><div class="xd_menu">    <!-- 第一个-->    <div class="dy_menu1" id="xd_dy_menu1">        　　<ul class="dy_menu1_ul_1">            　　　　<li class="li_has_children">                　　　　　　<a href="#">一级菜单1</a>                
　　　　　　<ul class="ve_menu">                    
　　　　　　　　<li><a href="#">二级菜单1</a></li>                    
　　　　　　　　<li><a href="#">二级菜单1</a></li>                    
　　　　　　　　<li><a href="#">二级菜单1</a></li>                    
　　　　　　　　<li><a href="#">二级菜单1</a></li>                    
　　　　　　　　<li><a href="#">二级菜单1</a></li>                
　　　　　　</ul>            
　　　　</li>           
　　　　<li><a href="#">一级菜单2</a></li>            
　　　　<li><a href="#">一级菜单3</a></li>            
　　　　<li class="li_has_children">                
　　　　　　<a href="#">一级菜单4</a>                
　　　　　　<ul class="ve_menu">                    
　　　　　　　　<li><a href="#">二级菜单1</a></li>                    
　　　　　　　　<li><a href="#">二级菜单2</a></li>                    
　　　　　　　　<li class="li_has_children">                        
　　　　　　　　　　<a href="#">二级菜单3</a>                        
　　　　　　　　　　<ul class="ve_menu offset">                            
　　　　　　　　　　　　<li><a href="#">三级菜单1</a></li>                            
　　　　　　　　　　　　<li><a href="#">三级菜单2</a></li>                            
　　　　　　　　　　　　<li><a href="#">三级菜单3</a></li>                           
　　　　　　　　　　 　　<li><a href="#">三级菜单4</a></li>                        
　　　　　　　　　　</ul>                    　　
　　　　　　　　</li>                    
　　　　<li><a href="#">二级菜单4</a></li>                
　　</ul>            
</li>            
<li><a href="#">一级菜单5</a></li>        
</ul>    
</div>    
<!-- 第二个-->    
<div class="dy_menu1" id="xd_dy_menu2">        
　　<ul class="dy_menu1_ul">            
　　　　<li><a href="#">一级菜单1</a></li>            
　　　　<li><a href="#">一级菜单2</a></li>            
　　　　<li><a href="#">一级菜单3</a></li>            
　　　　<li class="li_has_children">                
　　　　　　<a href="#">一级菜单4</a>                
　　　　　　<ul class="dy_menu1_ul">                    
　　　　　　　　<li><a href="#">二级菜单1</a></li>                    
　　　　　　　　<li><a href="#">二级菜单2</a></li>                    
　　　　　　　　<li class="li_has_children">                        
　　　　　　　　<a href="#">二级菜单3</a>                        
　　　　　　　　　　<ul class="dy_menu1_ul offset">                            
　　　　　　　　　　　　<li><a href="#">三级菜单1</a></li>                           
 　　　　　　　　　　　　<li><a href="#">三级菜单2</a></li>                            
　　　　　　　　　　　　<li><a href="#">三级菜单3</a></li>                           
 　　　　　　　　　　　　<li><a href="#">三级菜单4</a></li>                        
　　　　　　　　　　</ul>                    
　　　　　　　　</li>                    
　　　　　　　　<li><a href="#">二级菜单4</a></li>                
　　　　　　</ul>            
</li>            
<li><a href="#">一级菜单5</a></li>        
</ul>    
</div>    
<!-- 第三个-->    
<div id="xd_dy_menu3" class="dy_menu1"></div>
</div>
</body>
</html>

JS代码

/**
 * Created by maxiaodan on 2016/2/29.
 */
(function($){
    $.fn.menu = function (options) {
        if (typeof options != 'undefined' && options.constructor === Array) options = {data:options};
        var opts = $.extend({}, $.fn.menu.defaults,options);

        var _tempMenuData = [];

        function getLevel(id) {
            var _level = 0;
            var _o = getMenuData(id);
            while (_o != null) {
                _level ++;
                _o = getMenuData(_o.pid);
            }
            return _level;
        }

        function getMenuData(id) {
            for (var i=0;i<opts.data.length;i++) {
                if (opts.data[i].id == id) {
                    return opts.data[i];
                }
                return null;
            }
        }

        function getHtml (pid) {
            var li_len = getData(pid);
           if (li_len.length == 0) return null;
            var _ul = $('<ul></ul>');
            $.each(li_len, function (i,_d) {
                var _children = getHtml(_d.id);
                var _li = $('<li></li>').appendTo(_ul);

               $('<a href="'+_d.url+'"></a>').html(_d.n).appendTo(_li);

                if (_children != null) {
                    _li.addClass('li-has-children');
                    _children.appendTo(_li);
                    _li.bind({
                        mouseover : function(){
                            _children.show();
                        },
                        mouseout : function () {
                            _children.hide();
                        }
                    })
                }
            })

            if ( pid == null && opts.type == 1 ) {
                _ul.addClass('dy_menu1_ul_1');
            } else {
                var _level = getLevel(pid);
                _level > 0 && _ul.hide();
                _ul.addClass('dy_menu1_ul offset');
                //if (_level > opts.type) _ul.addClass('offset');
            }
            return _ul;
        }

        function getData(pid) {
            var _data = [];
            _tempMenuData = $.grep(_tempMenuData, function (_d) {
                if (_d.pid == pid) {
                    _data.push(_d);
                    return true;
                }
                return false;
            },true);
            return _data;
        }

        return this.each(function () {
            var menu = $(this);
            menu.addClass('dy_menu1');
            if (opts.data != null && opts.data.length > 0) {
                $.merge(_tempMenuData, opts.data);
                menu.append(getHtml(null));
            } else {
                menu.find('.li_has_children').each(function () {
                    var self = $(this);
                    var se_ul = self.children('ul');
                    se_ul.hide();
                    self.bind({
                        mouseover: function () {
                            se_ul.show();
                        },
                        mouseout: function () {
                            se_ul.hide();                        }                    })                })            }        })        $.fn.menu.defaults = {            type : 1,            data : null        }    }})(jQuery);

css代码

*{padding: 0px;margin: 0px;}
li{list-style: none;}
a{text-decoration: none;color: #000;}
.xd_menu { 100%;height: auto;margin-top:50px;}
.dy_menu1 ul{ 100%;height: 30px;line-height: 30px;}
.dy_menu1 ul li{text-align: center;font-size: 14px;color: #000;list-style: none; 100px;border:1px solid #dcdcdc;position: relative;}
#xd_dy_menu1 ul li{float: left;}
.dy_menu1 ul li a{display: inline-block;100%;height: 30px;color: #000;}
.dy_menu1 ul li a:hover{background: #777777;color: #fff;}
.dy_menu1 ul li.li_has_children{position: relative;}
.dy_menu1 ul li ul{position: absolute;display: none;z-index: 100;background: #fff;}
#xd_dy_menu1 ul li ul.offset {left:100px;top:-1px;}
#xd_dy_menu1 {margin-top:20px;}
#xd_dy_menu2 {margin-top: 50px;}
#xd_dy_menu2 ul li ul{left: 100px;top:-1px;}
#xd_dy_menu3 {margin-top:200px;margin-bottom: 100px;}
#xd_dy_menu3 ul li ul.offset {left:100px;top:-1px;}



注：此篇文章不是原著，感觉不错，分享出来

css代码css代码

相关阅读:
vue 2 渲染过程 & 函数调用栈
 vue keep-alive的实现原理和缓存策略
 记 vue 表单的一个性能问题
 IIS 部署到服务器上出现数据库连接失败
 JS apply和call
js 检查对象是否没有字段
 c# httpclient
js 使用flow
IIS 出现405
站点js屏蔽他人广告
原文地址：https://www.cnblogs.com/maxiaodan/p/5228288.html