给我写个layui的Tab选项卡
时间: 2023-07-16 22:13:28 浏览: 95
layui Tab选项卡切换跟随特效(源码)
好的,以下是一个简单的layui Tab选项卡示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui Tab选项卡示例</title>
<!-- 引入Layui核心库 -->
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<body>
<!-- 定义tab选项卡容器 -->
<div class="layui-tab layui-tab-brief" lay-filter="test">
<!-- 定义选项卡标题 -->
<ul class="layui-tab-title">
<li class="layui-this">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<!-- 定义选项卡内容 -->
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">选项卡1的内容</div>
<div class="layui-tab-item">选项卡2的内容</div>
<div class="layui-tab-item">选项卡3的内容</div>
</div>
</div>
<!-- 引入Layui核心库 -->
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<!-- 初始化Layui -->
<script>
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>
```
在上面的代码中,我们使用了Layui提供的Tab组件来创建Tab选项卡。我们通过定义一个`<div>`元素,并设置`layui-tab`类来创建一个选项卡容器。在容器中,我们通过定义一个`<ul>`元素来设置选项卡的标题,并通过`<div>`元素来设置选项卡的内容。
在底部的`<script>`标签中,我们使用了Layui的`element`模块来初始化选项卡组件。通过调用`layui.use('element', function(){...})`函数,我们可以获取到`element`对象,并通过调用`element.init()`方法来初始化选项卡组件。
阅读全文