html5点击左侧如侧进行变化,使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果...
时间: 2023-11-04 14:05:43 浏览: 98
好的,这是一个比较常见的需求,可以使用 layui 的 Tab 组件和 Tree 组件来实现。具体步骤如下:
1. 引入 layui 的 CSS 和 JS 文件:
```html
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
```
2. 创建 HTML 结构:
```html
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md3">
<div id="menuTree"></div>
</div>
<div class="layui-col-md9">
<div id="tabContent" class="layui-tab-content"></div>
</div>
</div>
</div>
```
其中,`menuTree` 是左侧的菜单树,`tabContent` 是右侧的选项卡内容。
3. 初始化 Tree 组件:
```javascript
layui.use(['tree'], function() {
var tree = layui.tree;
var menuData = [
{
title: '选项卡1',
id: 'tab1',
children: [
{title: '内容1', id: 'content1'},
{title: '内容2', id: 'content2'},
{title: '内容3', id: 'content3'}
]
},
{
title: '选项卡2',
id: 'tab2',
children: [
{title: '内容4', id: 'content4'},
{title: '内容5', id: 'content5'},
{title: '内容6', id: 'content6'}
]
}
];
tree.render({
elem: '#menuTree',
data: menuData,
click: function(obj) {
var node = obj.data;
if (node.children == null || node.children.length == 0) {
// 如果是叶子节点,则添加相应的选项卡
var title = node.title;
var contentId = node.id;
var contentHtml = '<div class="layui-tab-item">' + title + '</div>';
layui.element.tabAdd('demo', {title: title, content: contentHtml, id: contentId});
}
}
});
});
```
上面的代码定义了一个包含两个选项卡的菜单树,并且在点击叶子节点时添加相应的选项卡。
4. 初始化 Tab 组件:
```javascript
layui.use(['element'], function() {
var element = layui.element;
element.tabChange('demo', 'tab1');
element.on('tab(demo)', function(data) {
var contentId = data.elem.getAttribute('lay-id');
tree.setChecked('menuTree', contentId);
});
});
```
上面的代码初始化了 Tab 组件,默认显示第一个选项卡,并且在选项卡切换时同步选中相应的菜单节点。
最后,完整的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜单树和选项卡</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md3">
<div id="menuTree"></div>
</div>
<div class="layui-col-md9">
<div class="layui-tab layui-tab-brief" lay-filter="demo">
<ul class="layui-tab-title">
<li lay-id="tab1" class="layui-this">选项卡1</li>
<li lay-id="tab2">选项卡2</li>
</ul>
<div id="tabContent" class="layui-tab-content"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
layui.use(['tree', 'element'], function() {
var tree = layui.tree;
var element = layui.element;
var menuData = [
{
title: '选项卡1',
id: 'tab1',
children: [
{title: '内容1', id: 'content1'},
{title: '内容2', id: 'content2'},
{title: '内容3', id: 'content3'}
]
},
{
title: '选项卡2',
id: 'tab2',
children: [
{title: '内容4', id: 'content4'},
{title: '内容5', id: 'content5'},
{title: '内容6', id: 'content6'}
]
}
];
tree.render({
elem: '#menuTree',
data: menuData,
click: function(obj) {
var node = obj.data;
if (node.children == null || node.children.length == 0) {
// 如果是叶子节点,则添加相应的选项卡
var title = node.title;
var contentId = node.id;
var contentHtml = '<div class="layui-tab-item">' + title + '</div>';
element.tabAdd('demo', {title: title, content: contentHtml, id: contentId});
}
}
});
element.tabChange('demo', 'tab1');
element.on('tab(demo)', function(data) {
var contentId = data.elem.getAttribute('lay-id');
tree.setChecked('menuTree', contentId);
});
});
</script>
</body>
</html>
```
希望对你有所帮助!
阅读全文