可以
使用layui的`element`模块来实现选项卡切换。
首先，在HTML
中添加选项卡的容器和对应的内容块，如下所示：
```html
<div class="
layui-tab
layui-tab-card">
<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-tab`表示选项卡容器，`
layui-tab-card`表示选项卡的样式，`
layui-tab-title`表示选项卡的标题，`
layui-tab-content`表示选项卡的内容。每个选项卡的标题
使用`<li>`标签表示，选项卡的内容
使用`<div>`标签表示，选项卡的默认显示
使用`
layui-this`类名表示。
然后，在JS
中使用`element`模块来实现选项卡的切换，如下所示：
```
javascript
// 引入element模块
layui.use('element', function(){
var element =
layui.element;
// 监听选项卡切换事件
element.on('tab', function(
data){
console.log(this); // 当前Tab标题所在的原始DOM元素
console.log(
data.index); // 得到当前Tab的所在下标
console.log(
data.elem); // 得到当前的Tab大容器
});
});
```
在`element`模块
中，
使用`element.on('tab', function(
data){})`来监听选项卡切换事件。其
中，`
data.index`表示当前选项卡的下标，`
data.elem`表示当前选项卡的大容器。
完整的代码如下所示：
```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-tab
layui-tab-card">
<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>
<script src="https://cdn.staticfile.org/
layui/2.5.6/
layui.min.js"></script>
<script>
layui.use('element', function(){
var element =
layui.element;
// 监听选项卡切换事件
element.on('tab', function(
data){
console.log(this); // 当前Tab标题所在的原始DOM元素
console.log(
data.index); // 得到当前Tab的所在下标
console.log(
data.elem); // 得到当前的Tab大容器
});
});
</script>
</body>
</html>
```
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
