【LayUI】之动态树&动态选项卡Tab&iframe使用

要实现LayUI的Tab选项卡切换显示对应的页面，可以通过以下步骤： 1. 在HTML中创建Tab选项卡的结构，例如： ``` <div class="layui-tab"> <ul class="layui-tab-title"> <li class="layui-this">Tab1</li> <li>Tab2</li> <li>Tab3</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <!-- Tab1对应的页面 --> <iframe src="tab1.html"></iframe> </div> <div class="layui-tab-item"> <!-- Tab2对应的页面 --> <iframe src="tab2.html"></iframe> </div> <div class="layui-tab-item"> <!-- Tab3对应的页面 --> <iframe src="tab3.html"></iframe> </div> </div> </div> ``` 2. 在JavaScript中使用LayUI的Tab模块初始化Tab选项卡，例如： ``` layui.use('element', function(){ var element = layui.element; }); ``` 3. 在JavaScript中监听Tab选项卡的切换事件，并根据选项卡的索引切换显示对应的页面，例如： ``` element.on('tab', function(data){ if(data.index === 0){ // 切换到Tab1对应的页面 $('iframe[src="tab1.html"]').show().siblings().hide(); }else if(data.index === 1){ // 切换到Tab2对应的页面 $('iframe[src="tab2.html"]').show().siblings().hide(); }else if(data.index === 2){ // 切换到Tab3对应的页面 $('iframe[src="tab3.html"]').show().siblings().hide(); } }); ``` 其中，`data.index`表示选项卡的索引，从0开始计数。根据需要，可以在每个条件分支中使用AJAX请求获取对应的页面并显示在iframe中。注意，如果页面内容不是同源的，需要在iframe中使用`sandbox`属性或者使用其他跨域请求的方法。