layui-tab-card 获取当前选择的tab
时间: 2023-08-21 18:04:28 浏览: 216
IE-Tab-Multi
5星 · 资源好评率100%
要获取当前选中的 tab 的信息,可以使用 layui 中的 `element` 模块中的 `tab` 方法。具体实现步骤如下:
1. 引入 `layui` 的 `element` 模块:
```html
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.min.js"></script>
```
2. 获取当前选中的 tab 的信息:
```javascript
// 获取当前选中的 tab 的索引值
var currentIndex = layui.element.tabGet('demoTab', 'tabId');
// 获取当前选中的 tab 的标题
var currentTitle = layui.$('.layui-tab-card .layui-tab-title li:eq(' + currentIndex + ')').text();
// 获取当前选中的 tab 的内容
var currentContent = layui.$('.layui-tab-card .layui-tab-content .layui-tab-item:eq(' + currentIndex + ')').html();
```
其中,`demoTab` 是 tab 的容器元素的 id,`tabId` 是当前选中的 tab 的 id。`currentIndex` 获取当前选中的 tab 的索引值,`currentTitle` 获取当前选中的 tab 的标题,`currentContent` 获取当前选中的 tab 的内容。
需要注意的是,由于 `layui-tab-card` 和 `layui-tab` 的结构不同,获取当前选中的 tab 的标题和内容时,需要使用不同的选择器。在 `layui-tab-card` 中,需要使用 `.layui-tab-card` 作为选择器。
阅读全文