使用layui实现的左侧菜单栏以及动态操作tab项方法

使用使用layui实现的左侧菜单栏以及动态操作实现的左侧菜单栏以及动态操作tab项方法项方法

今天小编就为大家分享一篇使用layui实现的左侧菜单栏以及动态操作tab项方法，具有很好的参考价值，希望对大家有所帮助。一起跟

随小编过来看看吧

首先说一下左侧菜单栏首先说一下左侧菜单栏

这是一个最基本的左侧菜单栏，实现的过程很简单，官方的说明文档就有，但是我在导入layer.js之后，直接复制这段官方代码到我的编辑器上时，发

现页面是这样的：

发现，绑定属性的菜单并没有下拉选项，这个问题在我导入layer.all.js之后解决了，而且发现如果是在页面的最上方导入的话也没有下拉选项，只有在

html代码下面导入，才可以显示 ，不知道是什么原因。

<ul class="layui-nav layui-nav-tree layui-nav-side">

<li class="layui-nav-item layui-nav-itemed">

<a href="javascript:;" rel="external nofollow" rel="external nofollow" >默认展开</a>

<dl class="layui-nav-child">

<dd>

<a data-url="a" data-id="11" data-title="选项a" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="site-demo-active" data-type="tabAdd">选项a</a>

</dd>

<dd>

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-url="b" data-title="选项b" data-id="22" class="site-demo-active" data-type="tabAdd">选项b</a>

</dd>

<a href="javascript:;" rel="external nofollow" rel="external nofollow" >解决方案</a>

<dl class="layui-nav-child">

<dd>

<a href="">移动模块</a>

</dd>

<dd>

<a href="">后台模版</a>

</dd>

<dd>

<a href="">电商平台</a>

<li class="layui-nav-item">

<a href="">大数据</a>

</li>

</ul>

<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">

<ul class="layui-tab-title">

</ul>

<ul class="rightmenu" style="display: none;position: absolute;">

<li data-type="closethis">关闭当前</li>

<li data-type="closeall">关闭所有</li>

layui.use('element', function() {

var $ = layui.jquery;

var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

//触发事件

var active = {

//在这里给active绑定几项事件，后面可通过active调用这些事件

tabAdd: function(url,id,name) {

//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值

//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分

element.tabAdd('demo', {